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机 器 人 技术 是 跨 学 科 的 综合 性 技术 ， 涉 及 的 学 科比 较 广 泛 ， 包 含 光学 、 机 电 一 体 化 、 电 子 信 息 、 通 信 技 术 和 计算 机 编程 等 专业 。 在 机 器 人 教学 实践 当中 ， 很 难 把 所 有 的 学 科 知识 都 介绍 给 学 生 ， 全 部 精 
通 更 不 现实 。 在 搜寻 手势 控制 机 器 人 动作 资料 的 过 程 中 ， 笔 者 发 现 Kinect 可 以 很 方便 地 在 Processing 中 使 用 ， 不 像 在 其 他 开发 平台 上 那么 复杂 。 其 他 专业 的 软件 开发 平台 ， 单 单 配置 环境 就 要 耗费 大 量 时 间 。 
有 相当 一 部 分 机 器 人 爱好 者 是 非 计算 机 专业 的 人 员 ， 对 于 他 们 来 说 ， 专 业 软 件 开发 平台 的 编程 技术 会 成 为 其 学 习 的 障碍 ， 从 而 导致 他 们 放弃 深入 探究 的 计划 。 


Processing 是 一 门 具有 革命 性 和 前 瞻 性 的 新 兴 计 算 机 语言 ， 它 致力 于 在 电子 艺术 的 环境 下 介绍 程序 语言 ， 并 将 电子 艺术 的 概念 介绍 给 程序 员 。Processing 简 单 易学 的 界面 和 编程 风格 ， 使 很 多 机 器 人 爱好 者 
或 电子 制作 爱好 者 完成 机 器 人 的 控制 ， 或 实现 可 控 的 电子 产品 ， 例 如 控制 智能 家 居 等 。 笔 者 在 学 习 的 过 程 中 ， 对 Processing 深 深 着 迷 ， 通 过 动手 实践 ， 并 将 Arduino 与 之 结合 ， 设 计 了 很 多 有 趣 的 产品 。 本 书 是 
入 门 书籍 ， 重 点 引导 读者 学 习 Processing 的 基础 知识 。 除 了 入 门 基础 知识 ， 本 书 也 会 介绍 Processing 如 何 与 Arduino 进 行 通信 ， 以 及 如 何 使 用 Kinect 或 Xtion 等 进 阶 内 容 。 更 多 与 Arduino 互 动 的 例子 ， 以 及 使 用 各 
种 传感器 开发 的 小 游戏 都 收录 在 笔者 的 另 一 本 书 《Processing 与 Arduino 互 动 编程 》 中 。 


本 书 的 主要 内 容 及 读者 对 象 


本 书 适合 零 基础 的 人 学 习 ， 没 有 学 过 C 语 言 的 读者 可 以 从 第 一 篇 入 门 基础 篇 开始 学 习 ， 该 篇 从 基本 的 语法 开始 (为 了 能 更 好 地 向 读者 展示 程序 运行 效果 ， 该 篇 的 部 分 实例 会 用 到 后 面 章节 中 的 函数 ， 读 者 
可 以 暂 不 理会 ， 先 学 习 基 础 知识 ， 等 学 习 到 后 面 章节 时 再 深入 理解 ) ， 再 到 绘图 的 数学 基础 ， 循 序 渐进 地 进行 介绍 。 第 一 篇 的 最 后 部 分 会 介绍 面向 对 象 的 知识 ， 主 要 概述 类 和 对 象 ， 这 是 比较 抽象 的 内 容 ， 
如 果 初 学 者 感到 难以 理解 可 以 跳 过 ， 不 影响 其 他 部 分 的 学 习 。 但 该 部 分 有 利于 读者 建立 面向 对 象 的 思想 ， 建 议 读者 翻阅 更 多 的 资料 ， 掌 握 类 和 对 象 的 相关 知识 。 第 二 篇 是 图 像 图 形 篇 ， 有 一 定编 程 基础 的 读 
者 可 以 直接 阅读 该 篇 。 它 是 本 书 中 最 具 魅 力 的 篇 章 ， 学 习 这 些 章节 有 利于 读者 创造 各 种 各 样 令 人 惊艳 的 图 案 ， 或 定制 自己 的 软件 界面 。 该 篇 的 结尾 是 综合 实例 ， 读 者 可 以 借助 这 些 实例 综合 运用 前 述 的 知 
识 ， 绘 制 各 种 动画 或 展现 出 独特 的 艺术 视觉 效果 。 第 三 篇 是 互动 篇 ， 该 篇 有 和 锯 标 、 键 盘 的 互动 以 及 串口 通信 ， 通 过 实例 展示 Processing 与 Arduino 的 互动 ， 包 括 传 感 器 读 取 和 摇 杆 的 控制 程序 ， 让 读者 掌握 两 者 
的 交互 方式 。 第 四 篇 是 高 级 应 用 篇 ， 主 要 展示 如 何 用 Kinect 或 Xtion 进 行 互动 编程 ， 读 者 可 以 在 此 基础 上 自行 扩展 ， 如 采用 Kinect 或 华硕 的 Xtion 控 制 机 器 人 ， 甚 至 控制 无 人 飞机 等 。 
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“ 第 1 章 ”Processing 简 介 


第 1 章 ”Processing 简 介 


Processing 是 一 种 开源 编程 语言 ， 专 门 为 电子 艺术 和 视觉 交互 设计 而 创建 ， 其 目的 是 通过 可 视 化 的 方式 辅助 编程 教学 ， 并 在 此 基础 之 上 表达 数字 创意 。2001 年 ， 麻 省 理工 学 院 (MIT) 媒体 实验 室 的 
Casey Reas 和 Benjamin Fry 发 起 了 此 计划 ， 其 特定 目标 之 一 便 是 开发 一 个 有 效 的 工具 ， 通 过 激励 性 的 可 视 化 反馈 ， 帮 助 非 程序 员 进 行 编程 的 入 门 学 习 。Processing 语 言 建立 在 Java 语 言 的 基础 之 上 ， 但 使 F 
简化 的 语法 和 图 形 编程 模型 。 


[ 


Processing 简 单 易 用 的 特点 ， 以 及 其 丰富 的 拓展 让 学 习 者 可 以 创造 出 很 多 富有 想象 力 的 作品 。 因 为 源 自 java， 所 以 大 量 的 Java 库 都 可 以 添加 进来 调用 ， 比 如 Box2D、Unity 等 引擎 都 可 以 在 开发 时 调用 。 
除了 强大 的 Java 库 ， 还 可 以 结合 Arduino， 让 图 形 化 界面 和 硬件 产生 互动 ， 添 加 Kinect 或 Xtion 又 可 以 识别 人 体 的 肢体 动作 并 进行 处 理 ， 这 些 丰 富 的 拓展 让 Processing 的 作品 充满 了 想象 力 。 


1.1 初 识 环境 


通过 访问 Processing 官 网 www.Processing.org/download， 可 以 下 载 Processing， 请 根据 自己 的 操作 系统 ， 选 择 相应 的 Mac、Windows、Linux 的 版 本 。 


相对 于 其 他 语言 非常 复杂 的 开发 环境 ，Processing 开 发 环境 非常 简洁 明了 ， 如 图 1-1 所 示 。 


Processing 开 发 环境 由 代码 编辑 区 、 消 息 区 域 、 控 制 台 、 管 理 文件 的 标签 栏 、 常 


旨 令 按钮 的 工具 栏 和 一 排 菜单 构成 。 当 程序 运行 时 ， 会 弹出 一 个 新 的 窗口 ， 称 为 显示 窗 


利用 工具 栏 中 的 按钮 可 以 实现 以 下 功能 。 


一 一 
[em 一 菜单 栏 
DO 日 gg 加 


eno 和 


printlLn( “HelL10 World”™); 


代码 编辑 区 


消息 区 域 控制 台 


Hello World 


图 1-1 Processing 开 发 界面 


[加 :用 于 完成 程序 的 检查 和 编译 ， 并 运行 程序 。 


叫 : 停止 运 行 中 的 程序 ， 但 不 关闭 显示 窗口 。 


: 新 建 一 个 Processing 程 序 。 


十: 打开 文件 。 


本: 保存 当前 的 文件 。 


Y : 将 当前 程序 以 java 插件 嵌 入 HTML 文 件 内 导出 。 


回 ; 建立 新 的 标签 页 ， 可 以 用 于 创建 新 的 类 。 


有 独立 的 文件 夹 ， 文 件 扩展 名 .pde 代 表 此 文件 是 由 Processing 开 发 环境 创建 的 。 


Processing 编 写 的 程序 被 称 作 草 图 (sketch) ， 这 些 草图 是 在 文本 编辑 器 里 完成 的 。 每 个 草图 


1.2 ”绘制 第 一 个 图 形 


天 绘制 函数 ， 前 两 个 参数 设置 椭圆 圆心 的 位 置 ， 第 三 个 参数 设 


Processing 提 供 了 很 多 默认 的 函数 ， 用 来 绘制 点 、 线 、 椭 圆 、 和 矩形 等 。 先 来 绘制 一 个 简单 的 圆 ，ellipse (x，y，width，height) 是 顶 
长 轴 ， 第 四 个 参数 设置 短 轴 。 当 参数 width 和 height 相 等 时 得 到 的 就 是 正 圆 。 


例如 ， 以 画面 中 心 为 原点 画 一 个 直径 为 100 像 素 的 圆 ， 如 图 1-2 所 示 。 


示例 : 


ellipse (50, 50,100,100); 


图 1-2 图 


1.3 ”绘制 第 一 个 动画 


Processing 的 文本 编辑 框 中 默认 会 有 两 个 函数 : setup () 和 draw () 。 前 者 之 中 的 内 容 只 被 执行 一 次 ， 后 者 内 容 会 被 循环 执行 。 如 下 例 中 ， 设 置 圆 的 半径 为 连续 增 大 的 值 ， 在 画板 中 连续 绘画 呈现 的 
结果 就 是 一 个 圆 逐 渐变 大 的 动画 效果 ， 如 图 1-3 所 示 。 


示例 : 

i 
int r= 0; 
void draw () 


ellipse (50, 50, r++, r++); 


图 1-3 逐渐 变 大 的 贺 


14 第 一 个 交互 


调用 鼠标 绘制 一 根 直线 ， 可 以 移动 鼠标 来 进行 交互 ， 如 图 1-4 所 示 。 


示例 : 


void draw() 


line (mouseX,mouseY, 0,0);// 绘制 一 条 直线 


mouseX 和 mouseY 是 系统 变量 ， 也 是 鼠标 所 在 的 坐标 位 置 ， 后 面 会 详细 说 明 。 在 绘画 过 程 中 ， 不 消除 原 有 的 绘画 留 下 的 痕迹 。 此 时 如 果 想 要 消除 原 有 的 绘画 痕迹 ， 需 要 每 次 载 入 一 个 空白 页 面 。 只 需 加 
入 一 行 代码 即 可 ， 如 图 1-5 所 示 。 


图 1-4 绘制 直线 


图 1-5 无 痕迹 绘 


示例 : 


void draw() 
{ 
background (255); 
line (mouseX, mouseY, 0,0); // 直线 


} 


案 绘 制 ， 循 序 渐进 ， 再 进 阶 到 制作 动画 和 交互 。 为 


以 上 例子 介绍 了 一 些 基 础 概念 ， 并 没有 做 详细 解释 ， 主 要 目的 是 让 读者 对 Processing 有 初步 的 认识 。 接 下 来 将 引导 读者 从 语言 基础 开始 ， 结 合 简单 图 


了 能 得 到 最 大 的 收获 ， 需 要 读者 尽 可 能 多 地 上 机 编程 操作 ， 以 快速 掌握 这 门 语言 。 


第 2 章 语言 基础 


2.1 变量 


的 时 候 取出 来 。 


， 变 量 储存 的 值 也 可 以 更 改 。 你 可 以 把 变量 理解 为 存储 某 种 类 型 东西 的 箱子 ， 可 以 把 东西 放 进去 ， 也 可 以 在 


变量 是 储存 指定 数据 类 型 的 空间 。 在 一 个 程序 中 ， 同 一 变量 可 以 多 次 引 
变量 的 名 字 就 是 箱子 的 标签 ， 这 样 在 取出 里 面 东西 的 时 候 会 更 加 方便 。 使 


变量 的 时 候 要 提前 声明 。 


int variable; // 前 


不 同 的 数据 类 型 就 好 像 不 同 大 小 的 箱子 ， 可 以 放 不 同 的 数据 。 数 据 类 型 有 基础 数据 类 型 和 复杂 数据 类 型 ， 如 表 2-1 所 示 。 有 些 数据 类 型 内 存 空间 大 小 一 样 ， 但 是 它们 的 取 值 范围 


了 数据 在 内 存 空间 中 的 表示 方式 。 计 算 机 中 的 数据 都 是 以 二 进 制 位 来 储存 的 ， 一 个 位 也 就 是 0 或 1。boolean 类 型 的 数据 只 有 一 位 ， 也 就 是 占用 一 个 二 进 制 位 来 储存 这 种 数据 。 


数据 类 型 
boolean 
byte 

char 
color 

int 


float 


2.1.2 ”变量 名 字 


变量 是 储存 数据 的 箱子 ， 变 量 名 字 是 箱子 的 标签 。 为 了 更 方便 地 提取 数据 ， 变 量 


“ 变量 名 字 在 同一 作用 域 下 是 独一无二 的 。 

“ 变量 名 字 的 第 一 个 符号 是 字母 或 下 划 线 。 

“ 变量 名 字 区 分 大 小 写 ， 不 一 样 的 大 小 写 是 不 同 的 变量 。 
: 构成 变量 名 字 的 只 能 是 字母 数字、 下划线 。 


“ 变量 名 字 最 好 有 实际 意义 ， 能 表达 所 储存 的 内 容 。 


2.1.3 ”变量 赋值 


表 2-1 


数据 类 型 


占用 空间 


工 位 


BC 1) 


16 位 (2 字 节 ) 


32 位 (4 


> 


子玉 ) 


32 位 (4 字 节 ) 


32 位 (4 


PR 


FH 


的 命名 有 一 些 规则 。 


true 或 false 

-128 ~ 127 

0 = 65535 

0 ~ 4294967295 
-2147483648 ~ 2147483647 
3.4E+38 ~ 3.4E+38 


不 一 样 ， 这 说 明 类 型 决定 


把 数据 存 入 变量 这 个 箱子 叫 作 变 量 赋 值 。 通 过 运算 符 “=” 来 把 数据 存 入 变量 。 有 以 下 两 种 方式 来 进行 变量 赋值 。 
2-1 

int variable = 2; 
名 2 


int variable; 
variable = 3; 


Processing 内 置 了 打印 函数 ， 可 以 用 print () 或 printIn () 函数 把 变量 的 数值 在 控制 台 输出 。 


示例 : 


int variable; 
variable = 3; 
println (variable); // 输出 : 3 


执行 上 面 的 例子 可 以 在 文本 框 下 的 控制 台 上 看 到 输出 结果 为 3。 


2.1.4 ”系统 变量 


有 一 些 变 量 是 系统 内 置 的 ， 不 需要 声明 。 这 些 变量 不 允许 赋值 ， 这 些 变量 的 值 可 以 让 编程 人 员 获 得 系统 在 运行 时 的 一 些 参 数 。 比 如 ，mouseX、mouseY 的 值 是 鼠标 在 画板 上 停留 的 坐标 。 利 | 


量 可 以 更 方便 地 设计 交互 效果 。 表 2-2 列 出 了 部 分 Processing 系 统 变量 。 


表 2-2 


系统 变量 举例 


好 系统 变 


width sketch 窗口 的 像素 宽度 


height sketch 窗口 的 像素 高 度 

frameCount 运行 的 帧 数 

frameRate 每 秒 运行 的 帧 数 

screen.width 整个 屏幕 的 像素 宽度 

screen.height 整个 屏幕 的 像素 高 度 

key 最 近 一 次 按 下 的 键 值 ， 不 包括 特殊 刍 

keyCode 按 下 的 键 对 应 的 键盘 编码 ， 不 包括 小 写字 母 ， 包 括 特殊 键 
keyPressed 键盘 是 否 被 按 下 

mousePressed 鼠标 是 否 被 按 下 

mouseButton 被 按 下 的 鼠标 键 值 


示例 : 


下 面 例子 打印 系统 变量 mouseX、mouseY， 并 显示 在 画板 上 。 


void setup () 


size(900, 600); 
textSize (26); 


} 
void draw() 
{ 
background (0); 
text ("x:"+mouseX, 100, 200); 
text ("y:"+mouseY, 300, 200); 
} 


还 有 一 些 关键 字 ， 比 如 final， 可 以 让 变量 变 成 常量 ， 当 后 续 代码 再 修改 该 变量 的 时 候 就 会 报错 。 通 常用 于 设置 不 能 修改 的 常量 值 。 


示例 : 使 用 final 关 键 字 来 声明 变量 。 


final int a = 2; 


Eee // 出 错 


第 2 章 语言 基础 


2.1 变量 


变量 是 储存 指定 数据 类 型 的 空间 。 在 一 个 程序 中 ， 同 一 变量 可 以 多 次 引用 ， 变 量 储存 的 值 也 可 以 更 改 。 你 可 以 把 变量 理解 为 存储 某 种 类 型 东西 的 箱子 ， 可 以 把 东西 放 进 去 ， 也 可 以 在 用 的 时 候 取出 来 。 
变量 的 名 字 就 是 箱子 的 标签 ， 这 样 在 取出 里 面 东西 的 时 候 会 更 加 方便 。 使 用 变量 的 时 候 要 提前 声明 。 


int variable; // 前 面 是 数据 类 型 ， 后 面 是 变量 的 名 字 


2.1.1 ”基础 变量 类 型 


不 同 的 数据 类 型 就 好 像 不 同 大 小 的 箱子 ， 可 以 放 不 同 的 数据 。 数 据 类 型 有 基础 数据 类 型 和 复杂 数据 类 型 ， 如 表 2-1 所 示 。 有 些 数据 类 型 内 存 空间 大 小 一 样 ， 但 是 它们 的 取 值 范围 不 一 样 ， 这 说 明 类 型 决定 
了 数据 在 内 存 空间 中 的 表示 方式 。 计 算 机 中 的 数据 都 是 以 二 进 制 位 来 储存 的 ， 一 个 位 也 就 是 0 或 1。boolean 类 型 的 数据 只 有 一 位 ， 也 就 是 占用 一 个 二 进 制 位 来 储存 这 种 数据 。 


表 2-1 数据 类 型 
数据 类 型 占用 空间 取 值 范围 
boolean true 或 false 
byte 8 位 (1 字 节 ) -128 127 
char 16 位 (2 字 节 ) 0 ~ 65535 
color 32 位 (4 字 节 ) 0 ~ 4294967295 
int 32 位 (4 字 节 ) -2147483648 ~ 2147483647 
float 32 位 (4 字 节 ) 3.4E+38 ~ 3.4E+38 


2.1.2 ”变量 名 字 


变量 是 储存 数据 的 箱子 ， 变 量 名 字 是 箱子 的 标签 。 为 了 更 方便 地 提取 数据 ， 变 量 的 命名 有 一 些 规则 。 


变量 名 字 在 同一 作用 域 下 是 独一无二 的 。 

变量 名 字 的 第 一 个 符号 是 字母 或 下 划 线 。 
“ 变量 名 字 区 分 大 小 写 ， 不 一 样 的 大 小 写 是 不 同 的 变量 。 
“ 构成 变量 名 字 的 只 能 是 字母 、 数 字 、 下 划 线 。 


;变量 名 字 最 好 有 实际 意义 ， 能 表达 所 储存 的 内 容 。 


2.1.3 ”变量 赋值 


把 数据 存 入 变量 这 个 箱子 叫 作 变 量 赋值 。 通 过 运算 符 “=” 来 把 数据 存 入 变量 。 有 以 下 两 种 方式 来 进行 变量 赋值 。 


int variable = 2; 


int variable; 
variable = 3; 


Processing 内 置 了 打印 函数 ， 可 以 用 print () 或 printIn () 函数 把 变量 的 数值 在 控制 台 输 出 。 


示例 : 


int variable; 
Variable = 3; 
println (variable); // 输出 : 3 


执行 上 面 的 例子 可 以 在 文本 框 下 的 控制 台 上 看 到 输出 结果 为 3。 


2.1.4 ”系统 变量 


有 一 些 变量 是 系统 内 置 的 ， 不 需要 声明 。 这 些 变量 不 允许 赋值 ， 
量 可 以 更 方便 地 设计 交互 效果 。 表 2-2 列 出 了 部 分 Processing 系 统 变量 。 


width 

height 
frameCount 
frameRate 
screen.width 
screen.height 
key 

keyCode 
keyPressed 
mousePressed 


mouseButton 


示例 : 


下 面 例子 打印 系统 变量 mouseX、mouseY， 并 显示 在 画板 上 。 


这 些 变量 的 值 可 以 让 编程 人 员 获得 系统 在 运行 时 的 一 些 参数 。 比 如 ，mouseX、mouseY 的 值 是 鼠标 在 画板 上 停留 的 坐标 。 利 | 


表 2-2 系统 变量 举例 


sketch 窗口 的 像素 宽度 
sketch 窗口 的 像素 高 度 
运行 的 帧 数 

每 秒 运行 的 帧 数 
整个 屏幕 的 像素 宽度 
整个 屏幕 的 像素 高 度 


最 近 一 次 按 下 的 键 值 ， 不 包括 特殊 键 


按 下 的 键 对 应 的 键盘 编码 ， 不 包括 小 写字 母 ， 包 括 特殊 键 


键盘 是 否 被 按 下 
鼠标 是 否 被 按 下 
被 按 下 的 鼠标 键 值 


void setup () 


size(900, 600); 
textSize (26); 
} 
void draw() 
{ 
background (0); 
text ("x: "+mouseX, 100,200); 
text ("y:"+mouseY, 300, 200); 
} 


还 有 一 些 关 键 字 ， 比 如 final， 可 以 让 变量 变 成 常量 ， 当 后 续 代码 再 修改 该 变量 的 时 候 就 会 报错 。 通 常用 于 设置 不 能 修改 的 常量 值 。 


示例 : 使 用 final 关 键 字 来 声明 变量 。 


final int a = 


a= 3; 77 出 错 


2.2 ”运算 符 


运算 符 可 以 对 变量 进行 基本 的 运算 。 运 算 符 包 括 基本 运算 符 、 自 增 自 减 运 算 符 、 关 系 运算 符 逻 辑 运 算 符 和 条 件 运 算 符 。 


2.2.1 ”基本 运算 符 


表 2-3 所 示 是 Processing 的 基本 运算 符 。 


运算 符 


一 


表 2-3 运算 符 


使 用 方法 
atb 
a-b 
a*b 
ab 


ao00b 


加 减 乘除 是 常用 的 基本 运算 ， 求 余 是 两 个 数 相 除 所 得 的 余数 。 一 般 都 是 同类 型 的 数据 通过 运算 符 进行 运算 得 出 结果 。 比 如 两 个 int 类 型 的 1 相 加 得 出 2。 


示例 : 


int a= 1; 


int b= 17 
int c = atb; 
Println (c); // 输出 : 


区 


同一 数据 类 型 的 相 加 得 到 相同 数据 类 型 的 结果 。 还 有 一 些 特例 是 不 同 数据 类 型 的 数 相 加 ， 如 float 类 型 和 int 类 型 的 数 相 加 ， 得 到 的 是 float 数 据 类 型 的 结果 。 后 面 章节 会 介绍 运算 符 的 其 他 作用 ， 例 如 : 在 


字符 串 中 可 以 连接 组 合 字符 串 。 


2.2.2 ” 自 增 自 减 运算 符 


自 增 “++”、 自 减 “--” 运 算是 非常 方便 的 操作 ， 可 以 把 变量 的 值 自动 增加 1 或 者 减少 1。 


示例 : 


int i = 5; 
+? 
Println (i); // 输出 : 


6 


2 


此 处 i+ + 等 同 于 i+ =1 或 i=i+1。 变 量 赋值 的 顺序 非常 了 


示例 : 


要 ，i+ + 和 + +i 在 参与 运算 的 时 候 ， 前 者 是 先 参与 运算 再 自 增 ， 后 者 是 先 自 增 再 参与 运 


， 请 读者 仔细 区 分 两 者 的 差别 。 


int i = 1; 

int a= 0; 

a = it++; 

Println (i); // 输出 : 
Println (a); // 输出 : 


2 
I 


人 -8 


自 减 运算 同 理 。 


2.2.3 ”关系 运算 符 


关系 运算 符 可 以 得 到 两 个 数 
2-4 所 示 。 


居 关 系 判断 的 真 假 ， 例 如 4> 3 是 真 (true) ，3>4 是 假 (false) 。 为 了 区 分 等 于 和 赋值 ， 


表 2-4 关系 运算 符 


注意 等 于 用 了 两 个 等 于 号 


“==”， 而 赋值 是 一 个 等 于 号 “=”。 关 系 运算 符 如 表 


运算 符 使 用 方法 
== a== 
区 al=b 
> a>b 
>= a>=b 
a<b 
<= a<=b 


基本 数据 类 型 的 变量 和 变量 进行 判断 时 ， 检 查 值 是 否 相 等 而 不 是 数据 类 型 是 否 相同 。 


示例 : 
2=9 
int a = 65; 
float b = 65.0; 
char c = "A'; 
printin(a 一 c); // 输出 : true 
Println(a = c); // 输出 : true 
println(b = c); // 输出 : true 


2.2.4 ”逻辑 运算 符 


逻辑 运算 符 有 与 、 或 、 非 3 种 ， 对 应 的 符号 分 别 是 &&、||、! 。 它 们 设 定 复合 判断 条 件 ， 返 回 一 个 boolean 值 ， 要 么 是 true， 要 么 是 false。 


1. 与 运算 


语法 结构 : 


表达 式 1 && 表达 式 2 


如 果 表 达 式 1 和 表达 式 2 的 值 都 是 true， 那 么 整个 表达 式 的 值 也 是 true; 如 果 两 个 表达 式 中 任何 一 个 为 false， 那 么 整个 表达 式 的 值 为 false。 这 个 运算 符 可 控制 整个 子 表达 式 的 求 值 顺序 。 


a>5 && a<10 


&& 运 算 符 的 优先 级 比 > 和 < 运算 符 低 ， 所 以 子 表达 式 是 按照 下 面 这 种 方式 进行 组 合 的 : 


(a>5) && (a<10) 


但 是 尽管 && 操 作 符 的 优先 级 较 低 ， 但 它 仍 会 对 两 个 关系 表达 式 施加 控制 。 它 的 工作 原理 如 下 : && 操 作 符 的 左 操作 数 总 是 首先 进行 求 值 ， 如 果 它 为 真 ， 就 紧 接着 对 右 操作 数 进行 求 值 。 如 果 左 操作 数 为 
假 ， 那 么 右边 就 不 再 进行 求 值 ， 因 为 整个 表达 式 的 值 一 定 是 假 的 。 


2. 或 运算 


语法 结构 : 


表达 式 1 || 表达 式 2 


两 个 表达 式 中 任何 一 个 值 为 true， 或 者 两 个 都 为 true， 则 返回 值 为 true。 如 果 两 个 表达 式 都 是 false， 则 返回 值 为 false。 


逻辑 运算 符 还 可 以 组 合 使 用 : 
2-12 
Println((2<3) && (4>1 || 2<5));  // 输出 : true 
3. 非 运算 
语法 结构 : 
! 表达 式 


非 运算 符 可 以 把 一 个 布尔 值 变 成 相反 的 值 ， 即 true 变 成 false，false 变 成 true。 


示例 : 
2=13 
过 二 
print ("hello"); // 输出 : hello 


} 


2.2.5 “条 件 运算 符 


条 件 运算 接收 3 个 表达 式 ， 它 会 控制 子 表达 式 的 求 值 顺 序 。 


语法 结构 : 


条 件 表达 式 1 ?表达 式 2: 表达 式 3; 


条 件 操作 符 的 优先 级 很 低 ， 所 以 它 的 各 个 表达 式 即 使 不 加 括号 也 没什么 问题 。 但 是 为 了 清楚 起 见 ， 人 们 还 是 倾向 在 它 的 各 个 子 表 达 式 两 端 加 上 括号 。 


首先 计算 的 是 表达 式 1， 如 果 它 的 值 是 true， 那 么 整个 表达 式 的 值 就 是 表达 式 2 的 值 ， 表 达 式 3 不 会 进行 求 值 。 但 是 ， 如 果 表 达 式 1 的 值 是 false， 那 么 整个 条 件 语句 就 是 表达 式 3 的 值 ， 表 达 式 2 不 会 进行 求 


值 。 


示例 : 


a>5 ? b-6 : c/2 


可 以 读 作 : “a 是 不 是 大 于 5? 如 果 是 ， 就 执行 b-6， 否 则 执行 [2”。 


2.3 ”条 件 语句 


在 编程 时 可 能 会 处 理 一 些 较 复杂 的 分 支 情况 ， 需 要 进行 判断 ， 并 跳 转 到 不 同 的 语句 中 去 。 下 面 介绍 如 何 使 用 两 种 条 件 语句 。 


2.3.1 ii 你 件 语句 


使 用 条 件 语句 ， 可 以 使 程序 执行 某 些 代码 ， 而 跳 过 另 一 些 代码 ， 可 以 使 程序 在 符合 某 些 特定 条 件 时 才 执 行 特定 代码 。 


if 条 件 语句 语法 结构 : 


if (条 件 表达 式 ) 
{ 


代码 ; 
} 


先 判断 if 后 面 小 括号 中 表达 式 的 值 是 真 还 是 假 ， 如 果 是 true 执 行人 里 面 的 代码 ， 如 果 是 false， 则 直接 跳 过 人 }。 


示例 : 


Println(a) // 输出 : 0 


上 例 中 因为 a 的 初始 值 是 2， 所 以 进入 if 语句 ，a 被 重新 赋值 为 0。 


if else 语 句 语法 结构 : 


人 (条 件 表达 式 ) 


代码 17 
Jelse 


代码 2; 


如 果 if 后 面 的 条 件 表达 式 值 为 true， 程 序 会 运行 代码 1， 否 则 执行 else 后 面 的 代码 2。 


示例 : 


void setup () 
size(200,200) 7 
void draw() 


background (255); 
if (mouseX>100) 


fil1(0) 7 
rect (100, 100, 50, 50); // 和 鼠标 在 右 半 屏 时 画 方形 
} else 


£111 (0); 
ellipse (100,100, 50,50); // 鼠标 在 左 半 屏 时 画 贺 形 
} 
} 


运行 结果 如 图 2-1 所 示 。 


图 2-1 ”鼠标 移动 到 左 半 屏 时 画 圆 形 ， 移 动 到 右 半 屏 时 画 方 形 


上 述 代码 只 有 两 个 分 支 ， 但 是 可 以 通过 伐 套 else if 来 插入 更 多 分 支 的 情况 。 
else if 语句 语法 结构 : 


if (条 件 表达 式 1) 
{ 


代码 1; 
jelse if (条 件 表达 式 2) 


{ 
代码 2; 
else if (条 件 表达 式 n) 


代码 n; 
} 
else 
+ 
代码 n+1; 
} 


如 果 条 件 表达 式 1 为 true， 只 执行 代码 1; 否则 判断 条 件 表达 式 2， 如 果 条 件 表 达 式 2 为 true， 只 执行 代码 2; 否则 ， 判 断 条 件 表达 式 3， 以 此 类 推 ， 直 到 判断 条 件 表达 式 n 为 止 。 如 果 条 件 表达 式 n 为 
false， 则 执行 最 后 elsef} 里 面 的 代码 n+ 1。 


示例 : 


int a= 2; 
if(a>1) 
{ 


println("t"); 
} 
else if(a<-5) 


println("f"); 
} 
else 
{ 

println("m"); 


控制 台 输 出 : t。 


注意 的 是 ， 在 使 用 多 个 else if 条 件 语句 时 ， 程 序 会 按 顺序 执行 判断 ， 从 上 到 下 直到 返回 true。 如 果 在 中 间 某 个 过 程 中 条 件 成 立 ， 即 使 后 面 也 有 成 立 的 条 件 ， 程 序 都 不 会 执行 。 


2.3.2 ”Switch 条 件 语句 


switch 条 件 语句 用 于 需要 进行 多 次 判断 才能 做 出 选择 的 情况 。 


语法 结构 : 


switch (条 件 表达 式 ) 
{ 


default: 
代码 n+17 
break; 


switch 后 面 () 里 的 表达 式 就 是 要 进行 判断 的 条 件 ，switch 语 句 首先 计算 条 件 表达 式 的 值 ， 这 个 值 限定 了 数据 类 型 ， 只 能 是 byte、char、int 三 种 数据 类 型 ， 返 回 其 他 数据 类 型 程序 会 报错 。 


每 一 个 case 到 break 代 表 一 个 分 支 结构 ，case 后 面 跟 的 是 常量 表达 式 ， 用 来 判断 是 否 与 条 件 表达 式 相等 ， 若 相等 ， 就 执行 分 支 里 面 的 语句 ， 直 到 遇见 break。 若 每 个 分 支 的 值 都 和 表达 式 的 值 不 相等 ， 程 
序 会 执行 默认 分 支 default 后 面 的 语句 。default 语 句 也 可 以 省 略 ， 如 果 分 支 条 件 都 不 成 立 的 话 ， 程 序 就 什么 都 不 执行 。 


示例 : 


int a= 2; 
switch (a) 
{ 


case 1: 
println ("hello"); 
break; 

Case 2: 
println (“world"); 
break; 

} 


如 果 去 掉 break 那 么 就 会 从 标签 位 置 继续 向 下 执行 ， 而 不 会 执行 完 分 支 语句 就 马上 退出 。 


2.4 ”循环 语 名 
循环 结构 可 以 在 满足 某 一 个 条 件 之 前 反复 执行 一 个 语句 ， 让 更 少 的 代码 完成 更 多 的 事情 。 下 面 是 两 种 循环 结构 的 使 用 方式 。 
2.4.1 ”while 循环 语句 


用 while 来 实现 循环 操作 ， 它 的 语法 结构 如 下 : 


while (条 件 表 达 式 ) { 
循环 体 语句 ; } 


条 件 表达 式 就 是 这 个 循环 是 否 继续 进行 的 条 件 ， 而 循环 体 语句 就 是 这 个 循环 需 完成 的 事情 。while 语 句 首先 判断 条 件 表 达 式 的 值 (布尔 型 数据 的 值 ) 。 如 果 表 达 式 的 值 为 true， 则 执行 循环 体 语句 ， 否 
则 ， 结 束 while 语 句 。 当 循环 语句 执行 完 一 次 时 ， 会 再 次 判断 表达 式 的 值 ， 根 据 表达 式 的 值 决定 是 否 要 进行 下 一 次 循环 。 如 此 不 断 循环 ， 直 到 表达 式 的 值 为 false， 此 时 循环 结束 。 


示例 : 


int i = 10; 
void setup () 


size (900, 600); 
性 draw () 
while (i< 900) 
! ellipse (i,i, 50,50); 
i+=50; 


} 
} 


运行 结果 如 图 2-2 所 示 。 


图 2-2 ”用 while 循 环 画 圆 


2.4.2 for 循环 语句 


for 循 环 语句 的 语法 结构 : 


for (初始 化 语句 ;判断 循环 条 件 ; 更 新 语句 ) 
循环 体 语句; 


程序 进入 for 循 环 语句 之 后 ， 首 先 会 执行 初始 化 语句 ， 然 后 计算 判断 循环 条 件 语句 ， 如 果 判 断 循环 条 件 的 值 为 true， 则 执行 循环 体 语句 ， 再 执行 更 新 语句 ， 修 改 循环 控制 变量 。 接 着 又 开始 计算 判断 条 件 
的 值 ， 根 据 其 值 决定 是 否 需要 继续 下 一 次 循环 : 如 果 判 断 条 件 的 值 为 true， 则 继续 下 一 次 循环 反之 ， 则 结束 整个 循环 。 


示例 : 


void setup () 
size(900, 600) 7 
void draw() 
k for (int i = 0; i < 10; i++) 


ellipse (50*i, 50*i, 50, 50); 


运行 结果 如 图 2-3 所 示 。 


图 2-3 ”用 for 循 环 画 辆 


2.4.3 ”加 强 循 环 结构 


1. 跳 出 循环 


循环 中 可 以 使 用 break 语 句 来 永久 终止 循环 ; 也 可 以 使 用 continue 语 句 ， 用 于 永久 终止 当前 那 次 循环 ， 而 在 执行 之 后 ， 重 新 测试 表达 式 的 值 ， 决 定 是 否 继续 执行 循环 。 


下 面 例子 是 输出 10 以 内 的 偶数 : 


下 
if (i%2 != 0) 
{ 
continue; 


} 
println(i); // 输出 : 0 2 4 6 8 


下 面 的 示例 是 用 break 关 键 字 跳出 循环 : 


int a= 0; 
for {int 1 = 0 1 < 107 HH 
{ 
| 
break; 
} 


atty 


} 
println (a); // 输出 : 6 


两 条 语句 任何 一 条 如 果 出 现在 了 赃 套 的 循环 内 部 ， 它 只 对 最 内 层 的 循环 起 作用 ， 无 法 使 


2. 谋 套 循环 


谋 套 循环 指 在 一 个 循环 之 内 还 有 另 一 个 循环 。 内 部 循环 在 外 部 循环 的 每 个 周期 做 着 相同 的 


示例 : 


for {int 1 = Dr te Sy it+) 

{ 
for (int j = 0; j < 6; j++) 
{ 


println(j); 


break 或 continue 语 句 影响 外 层 循环 的 执行 。 


情 。 通 过 使 内 部 循环 的 一 部 分 依赖 于 外 部 循环 ， 可 以 使 内 部 循环 在 每 个 周期 中 的 表现 不 同 。 


输出 : 012345012345012345012345012345。 


2.5 ”函数 


已 


为 什么 要 使 用 函数 ” 当 要 处 理 的 问题 越 来 越 复 杂 ， 程 序 越 来 越 


庞大 的 时 候 ， 如 果 把 这 些 程序 代码 都 放 到 主 函 数 中 ， 将 使 主 函数 异常 腑 肿 ， 这 样 会 给 程序 的 


到 


们 是 如 何 影响 输出 的 。 这 种 抽象 使 编程 人 


2.5.1 定义 函数 


定义 函数 有 3 部 分 : 函数 名 、 参 数 体 、 


函数 内 部 的 计算 是 非常 复杂 的 ， 特 别 是 由 多 人 共同 完成 的 程序 ， 会 创建 大 量 的 新 函 
员 能 专注 于 程序 整体 的 设计 ， 而 无 须 考虑 过 多 细节 。 


数 的 使 用 可 以 省 去 复杂 代码 的 编写 。 如 果 程 序 中 需要 多 次 使 用 某 种 特定 的 功能 ， 那 么 只 需 写 一 个 合适 的 函 
。 即 使 某 些 功能 在 程序 中 只 使 用 一 次 ， 将 其 以 函数 的 形式 实现 也 是 有 必要 的 ， 因 为 函数 让 程序 变 成 模块 化 ， 从 而 有 利于 程序 的 阅读 、 修 改 和 完善 。 


的 不 同 ， 把 大 问题 划分 成 小 问题 ， 把 大 程序 划分 成 小 模块 。 函 数 则 成 为 模块 划分 的 基本 单元 ， 是 对 一 个 复杂 问题 处 理 过 程 的 一 种 抽象 。 


数 即 可 。 程序 可 以 在 任何 需要 的 位 置 调用 该 函 


函数 是 用 于 完成 特定 任务 的 程序 代码 的 单元 。 在 Processing 中 很 常见 的 函数 有 size () 函数 、line () 函数 等 。 这 一 节 将 要 展示 如 何 通过 编写 新 的 函数 ， 来 扩展 Processing 的 功能 特性 。 


维护 带 来 麻烦 。 在 这 种 情况 下 ， 可 以 按照 功能 


数 ， 并 且 同 一 个 函数 可 以 在 不 同 的 程序 中 调 


数 。 但 函数 的 优点 在 于 不 必 了 解 它 们 是 如 何 运作 的 ， 只 需 知道 如 何 使 


返回 值 。 


它们 就 已 经 足够 了 ， 即 了 解 输入 的 是 什么 和 它 


函数 名 就 是 为 了 标志 一 个 函数 而 取 的 名 字 ， 通 过 该 函数 名 可 以 快速 找到 这 个 函数 。 函 数 的 命名 规则 和 变量 的 命名 规则 相同 。 如 果 说 变量 命名 


要 “做 什么 ”。 


在 程序 里 函数 是 可 以 传 入 参数 的 ， 可 以 针对 函数 的 不 同 值 ， 来 进行 相应 的 操作 。 当 调 


语法 结构 : 


在 说 明 它 


函数 时 ， 它 会 执行 0 里 的 语句 ， 函 数 们 里 的 所 有 语句 叫 作 函数 体 。 


“是 什么 ”， 那 么 函数 的 命名 则 重 在 说 明 它 


返回 值 类 型 函数 名 (参数 类 型 1 参数 名 1， 
{ 


语句 ? 
return 返回 值 ; 
} 


参数 类 型 2 参数 名 2, http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15704/0EBPS/Text/...) 
/* 可 以 接收 任意 个 参数 ， 中 间 用 束 号 隔 开 */ 加 


函数 在 执行 完 任务 后 ， 往 往 需要 给 它 的 调 


者 一 个 返回 值 ， 表 示 函 数 运 行 的 结果 或 者 其 他 意义 。 如 下 面 的 示例 ， 在 这 个 加 法 函数 中 ， 函 数 名 为 add， 返 加 


值 类 型 为 int， 表 示 该 函数 在 完成 加 法 计算 后 ， 


将 计算 的 结果 作为 返回 值 返 回 给 它 的 调用 者 。 若 函数 只 是 执行 一 系列 动作 ， 无 需 返 回 值 ， 则 可 以 使 用 void 作为 返回 值 类 型 。 
示例 : 
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void draw() 

println(add (5,4)); 
} 
int add(int a,int b) // 此 处 有 两 个 参数 ， 中 间 用 过 号 隔 开 
{ 

return atb; 
} // 输出 : 9 


还 有 一 些 函数 是 没有 返回 值 的 ， 类 型 是 void。 下 面 的 示例 是 定义 一 个 名 为 circle 的 函数 ， 它 的 作用 是 画 圆 。 


示例 : 


void draw() 
{ 


circle(); 


void circle() 
{ 

ellipse (50, 50, 50, 50); 
} 


2.5.2 ”函数 重 载 


有 一 些 函数 功能 相同 ， 但 是 接收 的 参数 不 一 样 ， 它 们 就 可 以 用 相同 的 名 称 。 比 如 一 个 加 法 函数 ， 接 收 两 个 参数 相 加 一 起 。 而 另 一 个 加 法 函数 也 实现 了 相同 的 功能 ， 只 不 过 变 为 接收 3 个 参数 相 加 。 如 果 起 
不 同 的 名 字 ， 在 调用 函数 时 需要 起 很 多 名 字 ， 也 要 记录 很 多 名 字 ， 会 让 人 觉得 很 混乱 。 函 数 重 载 可 以 让 其 只 有 一 个 名 字 ， 调 用 时 ， 根 据 参数 个 数 和 类 型 自动 识别 ， 调 用 相应 的 函数 。 


示例 : 两 个 求 最 小 值 的 函数 ， 第 一 个 是 两 个 数 求 最 小 ， 第 二 个 是 3 个 数 求 最 小 。 功 能 相似 ， 用 一 个 名 字 更 容易 使 用 ， 减 少 函 数 数量 。 


int minNumber (int a,int b) 


int temp = aa > b? b:a; 
return temp; 


} 


int minNumber (int a,int b,int c) 


int temp = a > b? b:ay 
temp = temp < C ? temp:c; 
return temp; 


bE: 


2.5.3 ”函数 递归 


函数 递归 就 是 一 个 函数 直接 或 间接 调用 自身 。 递 归 有 一 定 的 适用 条 件 ， 在 某 些 情况 下 使 用 递归 可 以 方便 获得 想 要 的 结果 。 当 一 个 函数 自己 调用 自己 时 ， 如 果 编 程 没有 设 定 可 以 终止 递归 的 条 件 检测 ， 它 
会 无 限制 地 进行 递归 调用 ， 所 以 要 谨慎 使 用 递归 。 


递归 一 般 可 以 用 循环 来 代替 ， 但 是 递归 更 为 强大 ， 有 时 是 循环 无 法 处 理 的。 递归 方法 使 得 程序 结构 优美 ， 但 是 执行 效率 却 往往 没有 循环 高 。 


下 面 的 示例 是 计算 


二 


乘 。 


示例 : 


void setup () 1{ 
println (Factorial (8)); // 求 8 的 阶乘 
int Factorial (int i) 


{ 


if (num==1) returnl; 
else return num *Factorial (--num) 7 


2.6 数组 


2.6.1 数组 的 概念 


数组 是 一 组 有 序 目 数据 类 型 相同 的 变量 的 集合 ， 每 一 个 数组 里 面 的 项 目 被 称 为 元 素 ， 每 一 个 索引 值 标 记 其 在 数组 中 的 位 置 。 索 引 值 即 元 素 序号 从 0 开始 计数 。 例 如 ， 第 一 个 元 素 在 数组 中 的 索引 值 是 0， 
第 二 个 元 素 在 数组 中 的 索引 值 是 1， 以 此 类 推 。 如 果 有 20 个 数值 在 数组 中 ， 那 么 最 后 一 个 元 素 的 索引 值 就 是 19。 如 图 2-4 所 示 是 一 个 数组 的 结构 概念 图 。 


int[ ] years={2010, 2011, 2012, 2013, 2014, 2015}; 


数值 2011 2014 


索引 值 0 1 2 3 4 5 


图 2-4 ”数据 结构 概念 图 


对 集合 中 数组 元 素 的 访问 可 以 采用 下 标的 形式 ， 也 可 以 采用 指针 的 形式 进行 。 数 组 可 以 是 一 维 的 ， 也 可 以 是 多 维 的 。 当 数组 只 有 一 个 下 标 时 ， 这 类 数组 称 为 一 维 数组 ， 当 下 标 不 止 一 个 时 ， 称 为 多 维 数 
组 。 常 用 的 数据 集 基 本 在 三 维 以 内 。 


创造 一 个 数组 可 分 为 3 个 步骤 : 


1) 声明 和 定义 数据 类 型 。 
2) 创建 新 的 关键 字 和 数组 长 度 。 


3) 给 每 个 元 素 分 配 值 。 


使 用 数组 类 似 于 使 用 单独 的 变量 ， 但 遵循 的 是 同 种 模式 。 如 ， 写 一 个 整数 变量 x 如 下 : 


Int x; 


而 写 一 个 数组 ， 只 需 在 数据 类 型 后 加 上 括号 : 


int[ ] x; 


例如 ， 下 面 的 代码 表示 定义 了 一 个 intArray 整 型 数组 ， 下 标 从 0~4， 共 5 个 数组 元 素 ， 如 图 2-5 所 示 。 


int[ ] intArray=new int[5]; 


al0] 


af[1] 


af[2] 


2-5 长 度 为 5 的 整 型 数组 


数组 的 优点 在 于 只 需要 一 行 代码 就 能 写 多 个 变量 。 例 如 ， 下 面 这 行 代码 是 2000 个 整 型 变量 : 


a[3] 


al4] 


int[ ] x=new int[2000]; 


注意 每 个 数组 仅 可 以 储存 一 种 类 型 的 数据 (布尔 、 浮 点 、 整 数 、PImage 等 ) 。 不 能 将 不 同类 型 的 数据 混在 一 个 数组 中 。 如 果 必 须 这 样 ， 可 以 使 用 对 象 来 代替 。 


2.6.2 ”遍历 数组 


在 Processing 中 ， 很 多 时 候 需要 制作 并 处 理 多 图 片 ， 来 达到 所 需要 的 图 片 效 果 ， 如 果 一 个 一 个 地 对 | 
循环 语句 操作 ， 可 以 提高 工作 效率 。 


1) 用 for 循 环 遍历 数组 。 


下 面 就 是 一 个 利用 for 循 环 语句 ， 绘 制 单位 为 10 的 熊猫 来 回 运动 的 效果 ， 如 


图 2-6 所 示 。 


图 片 的 信息 进行 处 理 ， 会 消耗 很 多 的 精力 和 时 间 ， 并 且 需 要 大 量 的 工作 量 。 因 


此 ,利用 


数组 ， 通 过 for 


float [ ] x = new float[10]; /7 
float [ ] y = new float[10]; #2 
float [ ] s = new float[10]; a 
void setup() { 
size (300, 300); // 
smooth () ; // 
for (int i = 0; i < x.length; i 
x[i] = random(0, 300); /7 
yY[il = random(0, 300); WE 
s[i] = 0.5; i 
} 
} 
void draw() { 
background (200); 7 
for (int i =0; i<x.length; i++) 
Panda (x[i], yl[il]); // 


x[i] += s[i]; 
if (x[i] > 300 || x[i] <0) { 


s[i] = -~s[il; 
} // 

i // 
i 
void panda (float x, float y) { 

pushMatrix(); // 

translate (x, y); A 
// 熊猫 头像 绘制 函数 

fil1(0)7 


strokeWeight (1) 7 
ellipse(-35, -25, 35, 35); // 


ellipse (35, -25, 35, 35); A/ 
£1i1] (255); 

strokeWeight (1) 7 

stroke (0) 7 

ellipse (0, 0, 100, 90); YA 
fil1(0)7 
ellipse(-25，5，30，35) 7 A 
ellipse (25, 5, 30, 35); A 
£i1] (255); 

ellipse(-25, 0, 6, 6); YA 
ellipse (25, 0, 6, 6); A 
£i11 (0); 

ellipse (0, 25, 7, 5); je 
noFil1l1 (); 

stroke (0) 7 


strokeWeight (1) 7 
bezier(-2.5; 35; -2.51 371: 2.5 
popMatrix(); / 


2-30 
储存 每 幅 图 的 横向 运动 坐标 组 
储存 每 幅 图 的 纵向 运动 坐标 组 
储存 每 幅 图 的 偏 移 量 组 


窗口 大 小 

线段 光滑 

二 下 
0~300 随 机 赋值 
0~300 随 机 赋值 
偏 移 量 


背景 填充 
载 入 熊猫 函数 


防止 图 片 移出 窗口 
for 循 环 运行 10 次 ， 载 入 10 次 熊猫 函数 


矩阵 移动 
移动 函数 


左下 
右 耳 


左 眼 
右 眼 


左 眼球 
右 眼球 


鼻子 


37，2.5，35); // 用 贝 塞 尔 曲线 绘制 嘴巴 
矩阵 闭合 


2) 用 for 循 环 的 另 一 种 形式 来 遍历 数组 。 


语法 结构 : 


for (数据 类 型 名 :数组 ) { 
Println (变量 名 ); 


} 


示例 : 


int[ ] array={0,1,2,3,4}; // 创建 数组 
for (int i:array){ 
println (i); 


} 
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3) 通过 printArray () 函数 遍历 数组 。 


printArray () 函数 用 于 将 信息 显示 在 消息 控制 台中 。 每 一 行 都 会 显示 一 个 数组 元 素 。 这 个 函数 只 能 应 用 于 一 维 数组 。 


示例 : 


float[ ] £= {0.3, 0.4, 0.5 }; 
printArray (£); 


输出 : [0]0.3 
[10.4 
[2]0.5 


利用 数组 绘制 五 角 星 ， 如 图 2-7 所 示 。 


绘图 思路 : 描绘 五 角 星 10 个 顶点 坐标 ， 再 通过 vertex () 函数 连接 相 邻 点 。 


实例 点 坐标 : 


(50, 18) (61, 37) (83, 43) (69, 60) (71, 82) (50, 73) (29, 82) (31, 


示例 : 


图 2-7 五 角 星 


60) (17, 43) (39, 37) 


int[ ] x={50,61,83,69,71,50,29,31,17,39}; 

// 数组 x 储存 点 模 坐 标 

int[ ] y={18,37,43,60,82,73,82,60,43,37}; 

// 数组 y 储 存 点 纵 坐 标 

beginShape (); // 发 起 创建 新 图 形 信号 

for (int i=0;i<x.length;i++){ 
vertex(x[i],y[i]);  // 定义 x、y 轴 坐标 


} 
endShape (CLOSE); // 结束 信号 


注意 避免 在 draw () 内 创建 数组 ， 因 为 在 每 一 帧 创建 一 个 数组 会 降低 帧 速率 。 


2.6.3 ”二 维 数组 


可 以 这 样 理解 : 一 维 数组 解决 的 是 线性 问题 ， 而 二 维 数组 解决 的 是 面 的 问题 。 定 义 二 维 数组 的 语法 格式 如 下 : 


数据 类 型 [ ] [ ] 变量 名 ; 


例如 ， 定 义 一 个 整 型 数组 ， 变 量 名 为 intArray: 


int[][] int Array ; 


使 用 new 关 键 字 初 始 化 的 语法 格式 : 


new 数据 类 型 [数组 长 度 1] [数组 长 度 2] ， 


二 维 数组 可 以 当 作 矩阵 来 看 待 ， 二 维 数组 中 第 1 个 下 标 表示 行 ， 第 2 个 下 标 表示 列 。 功 能 可 以 看 作为 该 数组 分 配 一 块 连续 数组 长 度 1x 数 组 长 度 2 的 存储 空间 。 


例如 ， 定 义 一 个 存放 3 个 长 度 为 2 的 整 型 数组 ， 如 图 2-8 所 示 。 


图 2-8 定义 一 个 3 行 2 列 的 intArray 整 型 数组 


int[ ][ ] intArray; // 数组 声明 
intArray =new int[3] [2];  // 数组 初始 化 


在 第 二 个 [中 的 数字 一 般 可 省 略 ， 然 后 通过 下 标 来 分 别 初始 化 数组 中 的 数组 ， 以 此 来 得 到 包含 不 同 长 度 的 二 维 数组 。 


String[ ][ ] strArray=new String[5][ ]; 


对 第 一 个 数组 进行 长 度 初始 化 。 


strArray[0]=new String[5]; 


对 第 二 个 数组 进行 长 度 初始 化 。 


strArray[1]=new String[4]; 


对 第 三 个 数组 进行 长 度 初始 化 。 


strArray[2]=new String[3]; 


例如 : 


int x[2] [5]={{1,2,3,4,5}, {4,5,6,7,8}}; 


其 等 效 的 形式 如 下 : 


int x[2][ ]={{1,2,3,4,5}, {4,5,6,7,8}}; 


注意 ”数据 类 型 可 以 是 int、float、char 等 ， 数 组 名 用 标识 符 充 当 。 数 组 大 小 是 指 构成 数组 的 元 素 个 数 。 为 数组 分 配 的 存储 空间 为 一 连续 的 存储 空间 ， 这 是 利用 指针 访问 数组 的 物理 基础 。 访 问 数 组 时 ， 下 
标 始终 从 0 开始 。 


1) 用 for 循 环 遍 历 二 维 数组 。 


通过 for 循 环 遍历 二 维 数组 ， 编 程 画 一 个 随机 的 灰 度 噪声 图 ， 如 图 2-9 所 示 。 


size(300, 300); 

int cols = width; 

int rows = height; 

// 声明 二 维 数 组 

int[ ][ ] myArray= new int[cols] [rows]; 

// 初始 化 二 维 数 组 变量 

for (int i = 0; i < cols; i++) { 
for (int j = 0; j < rows; j++) { 

myArray[i][j] = int (random(255)); 

} 


} 
// 画 点 
for (int i = 0; i < cols; i++) { 
for (int j] = 0; j < rows; j++) { 
stroke (myArray [i] [j]); 
point (i, Jj); 


2) 用 另 一 种 for 循 环 遍历 二 维 数组 。 


示例 : 


图 2-9 


二 维 数组 绘制 灰 度 


| 


for (int j=0;j<strArray[i] .length;j++){ 
strArray[i] [j]=i+"_"+j; // 字符 串 样式 
} 


i 
for (int i=0;i<strArray.length;i++){ 
for (String j:strArray[i])t{ 

Print (It?) 


} 
println(); 
} 


控制 台 输出 : 

0.0, 01, 02, 03, 

10, 11 1.2, 13, 

20, 21, 22, 23, 

3) 第 三 种 for 循 环 遍历 二 维 数组 。 


示例 : 
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String[ ][ ] strArray=new String[3] [4]; 
// 创建 一 个 3 行 4 列 的 字符 囊 数组 
for (int i=0;i<strArray.length;i++){ 
for (int j=0;j<strArray[il] .length;j++){ 
strArray[i] [j]=i+" "+j; // 字符 串 样式 
} 
} 
for (int i=0;i<strArray.length;i++) { 
printArray (strArray[i]); 
} 


控制 台 输 出 : 
[0]"0_0" 
DoT 
[2]"0 2" 
BPO 
[0]"1_0" 
[多 站 
[2]"1.2” 
Bl 
[0]"2 0" 
[i 


[2]"2_ 2” 


B23" 


将 一 个 数组 变量 值 赋值 给 另 一 个 数组 变量 ， 改 变 其 中 一 个 变量 的 值 ， 会 影响 另 一 个 变量 的 值 。 


int[ ]x={1,3,5,7,9}; 

int[ ]y=x; 

y[1]=101; 

println (x[1]); // 输出 : 101 


2.6.4 ”数组 综合 应 用 


接 下 来 ， 本 书 提供 了 5 个 数组 综合 应 用 的 实用 范例 。 


范例 一 


功能 : 利用 数组 ， 绘 制 大 小 变化 的 圆 。 


示例 : 
float[] a=new float[10];  // 定 
int j=0; 
void setup() { 
frameRate (1); // 程序 每 秒 刷新 一 次 画面 


for (int i=0; i<10; i++) 
a[i]=random(100); // 把 随机 生成 的 数 放 入 数组 


} 
void draw() { 


background (204); // 背景 设置 为 灰色 
if (j<10) 
ellipse (50, 50, a[j], a[j]); 
j++7 
} 
范例 二 


功能 : 利用 数组 的 连续 遍历 功能 ， 制 作 渐变 图 效果 ， 如 图 2-10 所 示 。 


示例 : 

2-41 
size(600, 600); // 窗口 大 小 600x600 
float[ ] coswave= new float[width]; 

// 利用 new 运 算 符 将 像素 的 width 值 赋予 数组 
for (int i = 0; i < width; i++) { 
float amount= map(i, 0, width, 0, PI); 
// map (value, 最 小 值 区 间 , 最 大 值 区 间 ) 
coswave[i] = abs(cos(amount));  // 绝对 值 
} 
for (int i = 0; i<width; i++) { 
stroke (coswave [i]*255); // 灰 度 值 深化 
line(i, 0, i, height/3); 
} // 第 一 个 渐变 
for (int i = 0; i<width; i++) { 
stroke (coswave [i]*255/4); // 灰 度 值 变 化 
line(i, height/3, i, height/3*2); 
} // 第 二 个 渐变 
for (int i = 0; i<width; i++) { 
stroke (255 - coswave[i]*255); // 灰 度 值 亮 化 


line(i, height/3*2, i, height); 


图 2-10 ”数组 绘制 渐变 图 


功能 : 为 数组 分 配 一 块 连续 数组 大 小 1x 数 组 大 小 2 的 存储 空间 


说 明 : 二 维 数组 可 以 当 作 和 矩阵 来 看 待 和 处 理 ， 二 维 数组 中 第 1 个 下 标 表示 行 ， 第 2 个 下 标 表示 列 。 


示例 : 


在 这 个 例子 中 ， 有 两 个 数组 来 储存 鼠标 的 状态 : 一 个 用 于 x 坐 标 ， 一 个 用 于 y 坐 标 ， 这 些 数组 储存 鼠标 在 过 去 帧 内 的 位 置 。 每 一 帧 新 的 出 现 ， 保 存 最 久 的 x、y 坐 标的 值 都 会 被 现在 的 mouseX 和 mouseY 代 
新 的 值 则 被 添加 到 数组 的 第 一 个 位 置 ， 但 是 在 这 之 前 ， 数 组 中 的 每 一 个 值 都 会 被 向 右 移动 (从 后 到 前 ) ， 从 而 为 新 的 数值 腾 出 空间 。 


< 


同样 ， 每 一 帧 ， 所 有 的 60 个 坐标 都 被 用 于 在 屏幕 上 画 出 一 系列 的 圆 ， 如 图 2-11 所 示 。 


图 2-11 ”和 鼠标 动态 圆 绘 制 


示例 : 


int num=60; 
int[ ] x=new int[num]; 
int[ ] y=new int[num]; 
void setup() { 
size (240, 120); 
smooth (); 
nostroke (); 


void draw() { 
background (0); 
for (int i=x.length-1l; i>0; i--) { 
x[il]=x[i-1]; 
y[il=y[i-1]; 


} 


x[0]=mouseX; 

y[0]=mouseY; 

for (int i=0; i<x.length; i++) { 
£i1] (i*4); 

ellipse (x[i], yl[i], 40, 40); // 


画 圆 


案例 分 析 : 
数组 存储 值 分 析 ， 如 下 : 


原始 数组 如 下 : 


0 ] +4 
开始 循环 复制 第 二 到 最 后 一 个 数值 到 最 后 的 位 置 。 

0 ] 2 3 二 
第 二 次 循环 ， 复 制 元 素 2 到 元 素 3。 

0 ] 2 - 4 
第 三 次 通过 循环 ， 复 制 元 素 1 到 元 素 2。 

0 ] 2 3 二 
第 四 次 也 是 最 后 一 次 通过 循环 ， 复 制 元 素 0 到 元 素 1。 


0 1 2 3 4 


复制 新 的 元 素 到 元 素 0。 


0 


范例 四 


功能 : Processing 提 供 Plmage 类 用 于 加 载 图 


说 明 : 通过 载 入 原 图 


片 ， 通 过 对 图 


片 像素 点 RGB， 并 通过 数组 循环 重 排 ， 实 现 对 图 


片 像素 提取 及 重 构 ， 实 现 对 图 片 的 基层 处 理 及 预想 编辑 效果 。 


片 的 还 原 以 及 镜像 处 理 后 所 得 到 的 图 


片 ， 如 图 


2-12 所 示 。 
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3 4 


void setup() { 


pic=loadImage ("pic.jpg"); 

Size (pic.width*2, pic.height); 
background (0); 

smooth (); 


void draw() { 


int x=int (random (pic.width)); 
int y=int (random (pic.height)); 
int sum=xty*pic.width; 
loadPixels(); 

float r=red(pic.pixels[sum]); 
float b=blue (pic.pixels[sum]); 
float g=green (pic.pixels[sum]); 
int diameter=int (random (8,15)); 
nostroke (); 

£il] (r,g,b, 100); 

ellipse (x, y, diameter, diameter); 


ellipse (pic.width*2-x,y,diameter,diameter); // 


随机 获取 原 图 片 横 坐标 
随机 获取 原 图 片 纵 坐标 
像素 点 抵 阵 计算 

载 入 像素 点 RGB 值 

复制 red 值 

复制 blue 值 

复制 green 值 

绘制 像素 点 大 小 


分 析 : 


范例 五 


利用 二 维 数组 输出 杨辉 三 角形 前 10 行 。 


载 入 图 片 一 般 存 在 Processing 根 目录 下 ， 亦 可 通过 设置 url 值 绑 定 路 径 。 通 过 对 原 
过 设置 绘制 像素 的 大 小 来 得 到 精准 的 图 片 。 当 绘制 像素 大 小 为 1px 时 ， 可 得 到 精确 原 图 


图 2-12 镜像 处 理 


， 基 于 此 方法 得 到 的 图 


图 片 的 像素 点 RGB 提取 ， 并 重新 绘制 来 得 到 新 


片 在 后 期 处 理 上 更 为 完美 。 


图 片 ， 同 时 通过 对 绘制 的 路 径 变 化 得 到 所 需要 的 


图 片 效果 ， 亦 可 通 


int[] []sz=new int[10] [10]; 


int 


ey 


for( i=0;i<sz.length;i++){ 


} 


sz[i] [0]=1; 
sz[i] [i]=1; 


// 定义 一 个 10x10 列 的 数组 


// 输出 外 围 的 数值 1 


for (i=2;i<sz.length;i++) { 


i 


for (j=1;j<i;j++) { 


sz[i] [jl]=sz[i-1] [j-1]+sz[i-1] [j]; 
// 内 谋 循 环 输入 数值 


} 


for (i=0;i<10;i++) { 


for (j=0;j<=i;j++) { 


Print (sz[i] [(j]+" "); 


if (j==i) 
println(); 


// 内 嵌 循 环 输 入 


输出 : 


14641 
15101051 
1615201561 
T2135352171 
18285670562881 


19 3684126843691 


2.6.5 ”数组 函数 


Processing 提 供 了 处 理 数 组 的 全 局 函数 ， 详 细 函 数 如 表 2-5 所 示 。 读 者 可 以 使 用 这 些 国 


数 对 数组 进行 处 理 。 


这 些 函 数 有 个 共同 的 特点 ， 就 是 它们 在 调用 的 时 候 不 会 改变 原 数组 元 素 ， 而 是 返回 一 个 新 的 数组 。 


函 数 
append(orlginalArray, element ) 
alITayCopy(sTc, STcP, dst, dstP, length) 
concat(array1, array2) 
expand(array, newSize) 
reverse(array) 
shorten(array) 
sort(array, count) 
splice(array, value, index ) 


subset(array, start, count) 


表 2-5 数组 函数 


功 
追加 一 个 元 素 到 数组 ， 
复制 一 
连接 两 个 数组 
增加 数组 的 长 度 
用 于 颠倒 数组 的 顺序 
于 减少 数组 中 的 一 个 元 素 


以 从 小 到 大 的 数字 顺序 重新 排列 数组 ; 


到 为 一 


台 E 
用 


或 者 按照 字 


将 一 个 值 或 者 一 个 数组 的 值 插入 现 有 的 数组 中 


从 现 有 数组 中 提取 一 部 分 元 素数 组 


并 且 将 这 个 元 素 添加 到 新 的 位 置 


个 数组 (或 者 数组 中 的 一 部 分 ) 个 数组 


字母 的 顺序 重新 排列 数组 


示例 一 : 
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String[ ] sal = { "A","B","C"}; 
String[ ] sa2 = append(sal, "D"); 
println (sa2); // 输出 : RB CD 
示例 二 : 
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String[ ] sal = { "A", "B", "C"} 
String[ ] sa2 = { "D", "E", "FEF"}; 
String[ ] sa3 = concat (sal, sa2); 
println (sa3); // 输出 ABCDEF 
示例 三 : 
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int[] datal = {0, 1, 3, 4}; // 创建 并 赋值 


println (datal.length); 

int[] data2 = expand (datal); 

// 增加 数组 长 度 

println (data2.length); 

println (datal [data2.1length-5]); 


/* 输 出 
4 
8 
示例 四 : 
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String[ ] s={ "deer", "elephant", "bear", "aardvark", "cat" }; 
s = sort(s, 3); 4 对 前 面 3 个 元 来 进行 尖 序 
EEHAEIn(S) // 输出 : bear deer elephant aardvark cat 
示例 五 : 
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String[ ] a = { "OH", "NY", "CA" }; 
a = splicel(a, "KY", 1); // "KY" 插 入 a 中 a[1] 位 置 
); 


a 
( 
println(a 
String[ ] b = { "VA", "CO", "IL" }; 
a= splice(a, b, 1); // 数组 b 全 体 插 入 a 中 a[1] 位 置 
println (a); 
/* 输出 : 
OH KY NY CA 
OH VA CO IL KY NY CA 

大 

/ 


示例 六 : 
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Btn eal = MO de eR 
String[] sa2 = subset(sal, 1); // 提取 sal 中 a[1] 后 的 元 素 
println (sa2); 
String[] sa3 = subset (sal, 2, 3); 
// 提取 sal 的 a[2] 后 的 长 度 为 3 的 元 素 
println(sa3); 
/* 输出 : 
NY CA VACOIL 
CA VA CO 


2.7 ”字符 串 


2.7.1 字符 串 基本 概念 


字符 串 是 由 多 个 字符 的 组 成 的 集合 ， 例 如 “Good morning”， 在 引号 “” 内 的 都 叫 字符 串 。 在 Processing 中 字符 串 被 封装 成 了 类 String， 并 且 提 供 了 一 些 成 员 方法 和 全 局 函数 来 处 理 字符 串 兹 


字符 串 在 存储 上 类 似 于 字符 数组 ， 所 以 它 每 一 位 的 单个 元 素 都 是 可 以 提取 的 ， 给 编程 人 员 提 供 了 方便 ， 如 高 精度 运算 时 每 一 位 都 可 以 转化 为 数字 存 入 数组 。 


字符 串 的 初始 化 有 两 种 方式 。 第 一 种 用 双 引 号 来 初始 化 : 


DH 


String str ="Processing"; 


第 二 种 用 new 来 初始 化 ， 需 要 把 字符 数组 当 作 参数 传 入 : 
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char[ ] charpata={'I','1','o', Vv', el, Pl, 'r','o, gr', al, m'}; 
String strl=new String (charData); 

Println(str1) 7 

// 输出 : IloveProgram 


也 可 把 字 节 数组 作为 参数 : 


Byte[ ] byteData={80,114,111,99,101,115,115,105,110,103} »; 
String str2=new String (byteData); 

println (str2); 

// 输出 : Processing 


String () 类 重 载 了 构造 函数 ， 使 得 可 以 通过 参数 来 指定 字符 数组 的 一 段 字符 来 初始 化 字符 串 。 


String (data, offset, length) 
/* data: 字符 数组 或 者 字 节 数组 
offset: 开始 位 置 
length: 长 度 */ 


示例 : 
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Char[ ] charData={'p'i er rsf er ot' }? 


String str=new String (charData,2,3); 

// 将 从 charDate[2] 开始 长 度 为 3 的 元 素 赋予 str 
println(str); 

// 输出 : rfe 


“+” 可 以 连接 两 个 字符 串 ， 得 到 一 个 新 的 字符 串 。 


String name="Bob"; 

String age="twenty"; 

String Stt="NAME : "+name+" AGE:"+tage; 
println(str); 

// 输出 : NAME:Bob AGE:twenty 


2.7.2 ”字符 串 的 方法 
Processing 中 ， 字 符 串 被 封装 成 类 ， 并 提供 了 一 些 成 员 方 法 。 


1) length () 成 员 方 法 返回 字符 串 的 长 度 。 


下 面 例子 中 ， 字 符 串 “processing” 的 长 度 是 12 而 不 是 10， 因 为 空格 也 是 一 个 字符 。 


String str= “processing” ; 
println(str.length()); 
// 输出 : 12 


2) charAt (index) 成 员 方 法 返回 制定 索引 位 置 的 字符 。 


回 


字符 串 可 以 通过 索引 位 置 返回 指定 位 置 的 字符 ， 索 引 位 置 从 0 到 字符 串 的 长 度 减 1。 


fh 


index 为 返回 字符 的 索引 位 置 ， 类 型 为 int， 取 值 范围 是 0 到 字符 串 的 长 度 减 1。 


下 面 的 例子 为 通过 charAt () 函数 返回 字符 串 的 每 个 字符 ， 并 判断 字符 串 中 大 写字 母 的 个 数 。 
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String str="Hi,Processing"; // 定义 字符 串 并 赋值 
int count=07 
for (int i=0; i<str.length (); i++) { 
char ch=str.charAt (i); // 索引 字符 
if (ch>= 'A'&&ch<='2') // if 判 断 是 否 大 写字 母 


Count++; 


了 // 输出 大 写字 母 的 个 数 
队 


3) indexOf () 成 员 方 法 返回 指定 字符 串 的 索引 位 置 


indexOf (str) 

indexOf (str, fromIndex) 

/*str: 要 搜索 的 字符 或 字符 囊 

fromIndex: 开始 搜索 的 索引 位 置 ， 前 面 即使 有 匹配 字符 也 会 被 忽略 */ 


程序 会 从 左 向 右 开始 搜索 返回 一 个 与 指定 字符 串 匹 配 的 索引 位 置 ， 如 果 没 有 找到 则 返回 -1。 


字符 串 第 一 位 索引 位 置 为 0。 


注意 indexOf () 函数 只 返回 第 一 个 字符 的 索引 位 置 ， 若 查找 的 字符 在 字符 串 中 多 次 出 现 也 只 返回 第 一 个 字符 的 索引 位 置 。 


4) substring () 重 载 函数 用 于 返回 字符 串 中 从 指定 开始 位 置 到 结束 位 置 的 子 字符 串 。 


substring (beginIndex) 

substring (beginIndex, endIindex) 

/* beginIndex: 截 取 的 开始 位 置 

endIndex: 截 取 的 结束 位 置 ， 实 际 字符 串 长 度 减 1 */ 


5) 利用 indexOf () 函数 查找 定位 字符 或 者 字符 串 ， 并 结合 substring () 函数 即 可 实现 Word 中 的 查找 茶 换 功能 。 
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String str="We love Processing.";  // 定义 并 赋值 字符 囊 
int index=str.indexOf ("love"); // 索引 所 查 内 容 的 位 置 
String repl="beat"; // 定义 代替 的 字符 事 


if (index!=-1) { 
String restr=str.substring (0, index)+repl+str.substring (index+5); 
/* str.substring (0，index) 返回 love 字 符 前 的 所 有 字符 
str.substring (index+5) 返回 Jlove 后 面 的 所 有 字符 */ 


} 
println (restr); // 输出 新 字符 串 
// 输出 : We beat Processing. 


”来 判断 字符 串 是 否 相等 。 


6) equals (str) 成 员 方 法 用 于 判定 两 个 字符 串 是 否 相等 ， 如 果 相等 返回 true， 否 则 返回 false。 注 意 ， 在 processing 中 不 能 够 使 


7) toLowerCase () 成 员 方法 返回 一 个 新 的 字符 串 ， 并 把 字符 串 中 所 有 大 写字 母 全 蔡 换 成 小 写字 母 。 


8) toUpperCase () 成 员 方法 返回 一 个 新 的 字符 串 ， 并 把 字符 串 中 所 有 小 写字 母 全 蔡 换 成 大 写字 母 。 


以 下 示例 对 字符 串 使 用 凯撒 加 密 ， 它 的 基本 思想 是 : 通过 把 字母 移动 一 定 的 位 数 来 实现 加 密 和 解密 。 明 文中 的 所 有 字母 都 在 字母 表 上 向 后 (或 向 前 ) 按照 一 个 固定 数目 进行 偏 移 后 被 替换 成 密 文 。 例 


如 ， 当 偏 移 量 是 3 的 时 候 ， 所 有 的 字母 A 将 被 替换 成 D，B 变 成 E， 以 此 类 推 ，X 将 变 成 A，Y 变 成 B，Z 变 成 C。 
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String str="We loves Processing."; // 定义 并 赋值 字符 囊 
String upstr=str.toUpperCase (); // 转换 所 有 字母 为 大 写字 母 
char[ ] ch=new char[upstr.length()]; // 定义 字符 数组 用 于 储存 加 密 后 的 字符 
for (int i=0; i<upstr.length (); i++) { 


// if 判 断 当前 字符 是 否 为 大 写字 母 ， 符 合 则 对 字符 加 密 ， 不 符合 返回 原 字符 
if (upstr.charAt (i)>='A' && upstr.charAt(i)<='2') { 
ch[i]=char( (upstr.charAt (i)-'A')%$26+'A'+3); // 字母 循环 移动 


} 
else ch[i]=upstr.charAt (i); 
} 
String Caesastr=new String (ch); // 字符 数组 作为 参数 传递 给 字符 串 进行 赋值 
println (Caesastr); 
// 输出 : ZH ORYHV SURFHVVLQJ 


2.7.3 ”字符 串 处 理 函 数 


Processing 提 供 了 处 理 字符 串 的 全 局 函数 ， 详 细 函 数 如 表 2-6 所 示 。 它 们 为 编程 者 使 用 字符 串 处 理 数据 提供 很 大 帮助 。 


表 2-6 字符 串 函 数 


天 数 作 用 
join(array, separator) 将 一 个 字符 串 数组 合并 到 一 个 字符 串 中 
match() 将 正则 表达 式 应 用 到 一 段 文本 中 ， 并且 以 字符 串 的 形式 返回 匹配 的 组 
matchAll0 用 正则 表达 式 进行 字符 串 匹 配 
nf(num, digits) 
nf(num, left, right) 


格式 化 数字 到 字符 串 中 


te 格式 化 数字 到 字符 串 中 ， 并 且 用 逗号 把 干 位 数 隔 开 
nftc(num, right) 


nfp(num, digits) 格式 化 数字 到 字符 串 中 ， 和 nf0 类 似 ， 但 是 在 整数 前 面 加 “+” 号 ， 在 负数 前 面 加 
nfp(num, left, right) |“-” 号 
split(string, delim) 将 一 个 字符 串 分 隔 成 多 个 字符 或 者 字符 串 元 素 。 字 符 串 数组 会 返回 原 有 字符 串 分 开 


后 的 每 一 个 元 素 
trim(array) 移 除 字符 串 开头 和 结尾 的 空白 字符 


第 3 章 数学 基础 


在 绘制 图 形 和 动画 时 往往 需要 计算 点 、 线 、 面 之 间 的 关系 ， 这 其 中 包含 了 很 多 数学 运算 。Processing 提 供 了 很 多 数学 函数 ， 方 便 开 发 者 使 用 。 


3.1 数学 计算 


对 于 数学 计算 中 常用 到 的 运算 ，Processing 给 出 了 一 系列 函数 ， 如 表 3-1 所 示 。 


abs(a) 
cell(a) 
floor(a) 


max(a, b) 
min(a, b) 


sq(a) 


“ abs (a) 返回 4 的 绝对 值 。 


表 3-1 


返回 a 的 绝对 值 
向 上 取 整 ， 如 ceil(1.2) 返回 2 


向 下 取 整 ， 如 floor(1.2) 返回 1 


取 最 大 值 log(a) 
有 最 
dist(xl. yl x2. y2) 


数学 计算 函数 表 


作 用 
返回 Xa 
返回 a” 
返回 @” 
返回 lna 
返回 四 舍 五 和 结果 
返回 两 点 间 的 距离 


3-1 
int a = abs(153); // a 赋 值 为 153 
int b = abs(-15); // Db 赋 值 为 15 
float c = abs (12.234) 7 // c 赋 值 为 12.234 
float d = abs (-9.23);  // qd 赋值 为 9.23 
“ceil (a) 向 上 取 整 。 
3-2 
Filoat 六 三 .日 ,237 
int a = ceil (x); // a 赋 值 为 9 
“ max () 取 最 大 值 ， 有 两 种 重 载 (min 类 似 ) 。 
3-3 
int a = max(5, 9); // a 赋值 为 9 
int b = max(-4, -12); // b 赋 值 为 -4 


float c = max(12.3, 230.24); 
int[] values = { 9, -4, 362, 21 }; 
int d = max (values); 


// c 赋 值 为 230.24 
// 创建 一 个 整 型 数组 
// 9 赋值 为 362 


“log (a) 返回 以 e 为 底 ，a 为 真 数 的 对 数 lIna。 


// 求 1g 
float a = 1og(5)/1og(10) 
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// a 赋 值 为 0.69897 


“dist (xl1，y1，x2，yY2) 返回 两 点 间 的 距离 。 


// 求 点 (1,1) 到 点 (4,5) 间 的 距离 
float d = dist(]1,1,4,5); 


// d 赋 值 为 5.0 


3.2 三角 函数 


对 于 有 关 三 角 的 常用 运算 ，Processing 给 出 了 一 系列 函数 ， 如 表 3-2 所 示 。 


sin(aw) 
cos( CQ ) 
tan(a ) 
asin(a) 


acos(a) 


表 3-2 ”三角 函数 表 


与 数学 中 的 不 一 样 ，Processing 中 默认 以 顺 时针 方 向 旋转 为 正方 向 ， 另 外 用 PI 表示 Tt。 


atan2(a,b) 


degrees( 弧度 值 ) 


radians( 角度 值 ) 


作 “用 
反正 切 
反正 切 2 
返回 对 应 的 角度 值 
返回 对 应 的 弧度 值 


float a = PI/6; 


println (sin(a)); // 输出 0.5 
Println (degrees (a)); // 输出 30.0 
println (a); // 输出 0.5235988 


atan 和 atan2 都 是 反正 切 函 数 ， 它 们 之 间 有 以 下 两 点 不 同 : 
1) 参数 的 填写 方式 不 同 。 


例如 : 有 两 个 点 p1 (x1，y1) 和 p2 (x2，y2) ， 这 两 个 点 形成 的 斜率 的 弧度 计算 方法 分 别 是 : 


float radian = atan( (y2-y1)/ (x2-x1) ) 7 


或 


float radian = atan2( y2-yl, x2-xl] ) 7 


2) 在 二 、 三 象限 函数 的 返回 结果 不 同 。 


// 在 第 二 象限 时 

float x = -1.7320508; 
float y= 1; 
float tan = atan(y/x); 

float tan2 = atan2 (y/x); 

println (degrees (tan)); // 输出 : -30.0 
Println (degrees (tan2) ) 7 // 输出 : 149.9999 


// 在 第 三 象限 时 

float x = -1.7320508; 
float y = -1; 
float tan = atan(y/x); 

float tan2 = atan2 (y/x); 

println (degrees (tan) ) 7 // 输出 : 30.0 
Println (degrees (tan2) ) 7 // 输出 : -149.9999 


结论 : 为 了 根据 x、y 坐 标 求 得 正确 的 角度 ， 建 议 使 用 atan2 函 数 。 


3.3 ”功能 映射 函数 


对 于 有 关 映 射 的 运算 ，Processing 给 出 了 一 系列 函数 ， 见 表 3-3。 


消 数 作 用 
constrain() 通过 最 大 值 和 最 小 值 来 约束 指定 的 数 
lerpO 线性 插值 
norm() 把 指定 数 从 指定 范围 映射 到 0.0 ~ 1.0 
map() 把 指定 数 从 指定 范围 映射 到 另 一 个 范 轩 


外 | 凡 


“constrain() 通过 最 大 值 和 最 小 值 来 约束 指定 的 数 。 


constrain (amt, low, high) 
amt: int 或 float 

low: 最 小 值 

high: 最 大 值 


原理 : 如 果 amt>high 为 真 则 返回 high， 如 果 amt<low 为 真 则 返回 low， 否 则 返回 amt。 


汪 =] 
Println (constrain (10,20,80));  // 输出 20 
Println (constrain (50,20,80));  // 输出 50 
Println (constrain (90,20,80));  // 输出 90 
“lerp () 用 于 在 指定 的 两 数 之 间 线 性 插值 。 
lerp (start, stop, amt) 
start: 开始 值 
stop: 结束 值 
amt: int 或 float 值 
插值 原理 : start+ (stop-start) *amt 
3=12 
float x=lerp(50, 100, 0.1); // 将 55.0 赋 值 给 X 
float y=lerp(50, 100, 0.5) ; // 将 75.0 赋 值 给 y 


norm () 用 于 把 指定 数 从 指定 范围 映射 到 0.0~1.0。 


norm(value, start, stop) 
start: 开始 值 
stop: 结束 值 


Value: int 或 float 值 


原理 : (value-start) / (stop-start) 
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float x=norm(60, 50, 100); // 将 0.2 赋 值 给 X 
float y=norm(45, 50, 100) ; // 将 -0.1 赋 值 给 Y 
float z=norm(110, 50, 100) ; // 将 1 .2 赋值 给 z 


“map () 用 于 把 指定 数 从 指定 范围 映射 到 另 一 个 范围 。 


map (value, startl, stopl, start2, stop2) 
start1: 第 一 个 范围 开始 值 
范围 结 


stop2: 第 二 


原理 : start2+ (stop2-start2) *norm (value, start1, stop1) 
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float x=map(55, 50, 100,500,1000) ; // 将 550.0 赋 值 给 X 
float y=map(40, 50, 100,500,1000) ; // 将 400.0 赋 值 给 y 


float z=map(110, 50, 100,500,1000) ; // 将 1100 赋 值 给 z 


3.4 随机 数 


1. 随 机 数 


在 Processing 中 ， 如 果 想 要 获取 随机 的 动画 效果 ， 就 要 用 到 和 随机 数 相 关 的 函数 。 


random () 函数 返回 一 个 从 0 到 指定 数值 范围 内 的 随机 数 。 


random (float x) 
X 为 float 类 型 数值 


示例 : 


float a=random(20); 
// a 为 0~20 的 一 个 随机 数 


重 载 函数 random (float x，float y) 可 以 返回 两 个 指定 数值 之 间 的 随机 数 。 


random (float x,float y) 


Xx 为 float 类 型 数值 
Y 为 float 类 型 数值 
示例 : 
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float a=random(10,20); // a 为 10~20 的 一 个 随机 数 


当 编 程 人 员 想 获取 随机 整数 时 ， 需 要 对 随机 数 进行 类 型 转换 。 


示例 : 
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int a=(int)random(10,20); // a 为 10~20 的 一 个 随机 整数 


示例 : 在 大 小 为 400x400 的 窗口 下 绘制 16 个 相等 的 正方 形 ， 使 它们 的 颜色 呈 随 机 灰 度 ， 如 图 3-1 所 示 。 


3-18 
void setup () 
{ 
size(400,400); // 窗口 大 小 设置 为 400x400 
void draw() 
{ 
for (int i=0;i<4;i++) AAA 第 和 
{ 
for (int j=0;j<4;j++) // 第 j 列 
{ 
fill (random (255)); // 填充 颜色 为 随机 灰 度 
rect (i*100,j*100, 100, 100); // 务 出 宽 和 高 都 为 100 的 矩形 
} 
} 
delay (100); // 延迟 100 毫 秒 
2. 随 机 数 种 子 


随机 数 又 分 为 两 种 ， 一 种 是 真 随机 数 ， 另 一 种 是 伪 随 机 数 。 
真 随机 数 是 计算 机 通过 对 外 界 信息 的 采集 而 获取 的 。 例 如 ， 用 户 敲 击 键盘 的 时 间 ， 原 子 的 放射 性 衰变 的 时 间 。 这 些 信息 都 是 不 可 预测 的 ， 于 是 就 能 获取 真 随机 数 。 


在 Processing 中 ， 通 过 random () 函数 产生 的 随机 数 并 不 是 真正 的 随机 数 ， 它 们 是 “ 伪 随 机 数 ”。 所 获取 的 伪 随 机 数 都 是 通过 向 计算 机 发 送 一 个 种 子 值 ， 然 后 计算 机 通过 算法 计算 并 返回 一 个 看 上 去 
像 是 随机 值 的 数 。 实 际 上 ， 通 过 这 种 方法 获得 的 随机 数 都 是 可 以 预测 的 。 


图 3-1 随机 灰 度 格子 


通过 设置 随机 数 种 子 值 就 能 每 次 都 获取 相同 的 随机 数 序列 。 


randomSeed (long x); 
x 为]ong 直 


示例 : 在 窗口 


大 小 为 400x400 下 绘制 16 个 相等 的 正方 形 ， 使 它们 同一 行 灰 度 相 同 ， 不 同行 呈 随 机 灰 度 ， 如 


图 3-2 所 示 。 
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void setup () 
size (400,400); // 窗口 大 
id draw () 
l nt i=0;i<4;i++) // 第 i 行 


randomSeed (5); 
for (int j=0;j<4;j++) 
{ 


fill (random (255)); 
rect (i*100,j*100,100,100); 


} 
delay (100); 


// 延迟 100 毫 秒 


图 3-2 ”随机 数 种 子 生成 相同 随机 数 序列 


示例 : 随机 产生 几 个 数 ， 为 圆 的 半径 ， 放 入 数组 ， 每 隔 一 秒 调用 一 个 数组 的 半径 。 


float[] a=new float[10]; // 定义 一 个 长 度 为 10 的 浮 点 型 数组 


int j=0; 
void setup () 


frameRate (1) 
for (int i=0;i<10;i++) 


a[il]=random(100); 


void draw() 


{ 


background (204); 


if(j<10) 


// 每 秒 刷新 一 次 画面 


// 把 随机 生成 的 数 放 入 数组 


// 背景 设置 为 灰色 


ellipse (50, 50,a[j],a[j]); 


了 4 


什么 是 优雅 的 程序 ? 第 一 ， 易 读 : 理想 的 状态 是 ， 能 把 一 个 程序 代码 读 出 声 来 ， 读 者 听 了 之 后 就 知道 这 个 程序 是 解决 什么 问题 的 ; 第 二 ， 精 炼 简洁 ， 运 行 快 ， 结 构 清晰 。 


CC 语言 面向 过 程 ， 注 重 


法 ， 强 调 过 程 。 面 向 对 象 的 语言 则 专注 于 实现 程序 的 目的 ， 而 不 是 各 种 细 枝 末节 。C++、Java、Processing 等 语言 都 是 面向 对 象 的 语言 。 


面向 对 象 编程 (Object Oriented Programming，OOP) 是 一 种 计算 机 编程 架构 。OOP 达 到 了 软件 工程 的 3 个 主要 目标 : 重 


性 、 


灵活 性 和 扩 


展 性 。OOP 的 一 条 基本 原则 是 计算 机 程序 是 由 单个 能 够 


起 到 子 程序 作用 的 


元 或 对 象 组 合 而 成 的 。 为 了 实现 整体 运算 ， 每 个 对 象 都 能 够 接收 信息 、 处 理 数据 和 向 其 他 对 象 发 送信 息 。 


4.1 


已 


。 对 生活 中 实例 进行 抽象 的 过 程 就 是 类 的 


定义 类 和 对 象 


如 何在 Processing 里 定义 一 个 类 ? 下面 是 定义 类 的 语法 规则 : 


定义 过 程 。 例 如 : 定义 一 个 时 钟 类 ， 它 有 时 针 、 分 针 、 秒 针 等 静态 


对 象 是 对 类 的 实例 化 。 例 如 ， 对 于 时 钟 类 ， 可 以 定义 对 象 为 手表 ， 作 为 时 钟 类 的 一 个 实例 。 


面向 对 象 的 思想 把 现实 世界 中 的 物体 都 封装 成 对 象 ， 而 类 是 所 有 相同 类 型 对 象 的 抽象 ， 是 它们 总 体 的 描述 。 类 概括 了 一 些 事物 


的 共同 属性 和 行为 ， 类 是 对 现实 生活 中 对 象 的 抽象 ， 是 一 种 抽象 的 数据 类 


属性 ， 还 具有 秒针 走 60 格 分 针 走 1 格 ， 分 针 走 60 格 时 针 走 1 格 等 行为 属性 。 
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首先 ， 定 义 一 个 类 


到 关键 字 class。 类 名 首 字 母 要 大 写 。 成 员 变 


数 来 初始 化 成 员 变量 。 成 员 方法 表示 对 象 的 功能 ， 函 数 在 类 里 面 称 为 方法 。 


表示 对 象 的 状态 ， 是 我 们 所 需要 定义 的 变量 。 构 造 函数 


下 面 定 义 了 一 个 Student 类 ， 成 员 变量 Name 表 示 姓名 ， 成 员 方 法 hobbies () 和 study () 表示 爱好 和 学 习 。 


来 初始 化 对 象 ， 没 有 返回 


值 ， 名 字 要 和 类 名 相同 ， 可 通过 构造 函数 传递 参 


class Student 


String Name; // 定义 变量 
Student (String n) // 构造 函数 ， 
{ 

Name=n; 
i 
void hobbies () // 成 员 方法 
{ 


对 变量 进行 初始 化 


只 有 输出 功能 


Println("I like playing basketball."); 


} 
void study() // 成 员 方 法 ， 
{ 


println("My math is very good."); 


只 有 输出 功能 


对 象 是 类 的 实例 化 。 创 建 类 的 对 象 由 new 关 键 字 加 上 类 的 构造 函数 类 实现 。 下 面 的 语句 创建 了 两 个 对 象 : 


Student Stul = new Student (A); 
Student Stu2 = new Student (B); 


示例 : 


定义 一 个 正方 体 Cube 类 ， 成 员 变 量 length 表 示 边 长 ， 成 员 方法 volume () 返回 


正方 体 的 体积 ; 成 员 方法 superficialArea () 返回 正方 体 的 表 


void setup () 


Cube cube = new Cube (12.0) 
Println ("1ength="+cube.length) 7 
Println ("volume="+cube.volume () ) 7 
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// 创建 对 象 
// 输出 


println ("superficialArea="+cube.superficialArea ()); 


} 
class Cube 


{ 


float length; 
Cube (float r){ 
length = r; 


float volume () 
{ 


return length * length* length; 


float superficialArea() 
{ 


return length* length*6; 


// 定义 Cube 类 


// 返回 体积 


// 返回 表面 积 


4.2 


通过 对 未 使 


示例 : 画 两 个 圆 ， 圆 1 向 圆 2 靠近 并 最 终 重合 。 


输出 : 


length=12.0 


volume=1728.0 


superficialArea=864.0 


类 的 深入 理解 


在 编程 中 使 用 类 是 一 个 良好 的 习惯 ， 既 可 减少 代码 量 ， 也 可 为 其 他 程序 员 阅读 和 修改 维护 程序 提供 便利 。 对 于 刚 接触 类 的 初学 者 ， 要 怎么 才能 掌握 类 并 尽快 使 用 类 ， 从 而 令 程序 更 优雅 呢 ? 


1) 不 使 用 类 的 情况 。 


类 的 代码 进行 修改 ， 并 添加 到 类 中 ， 可 以 快速 地 掌握 类 的 几 大 语法 规则 。 


成 员 变 量 x1、y1 表 示 圆 1 的 坐标 ，x2、y2 表 示 


2 的 坐标 ; 成员 方法 diameter 表 示 


首先 看 看 不 使 用 类 的 代码 4-5， 这 些 代码 堆 蔷 在 主 程序 中 ， 不 利于 后 期 修改 与 维护 。 


圆 的 直径 。 
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float x1=257 // 定义 变量 
float yl=25; 
float x2=345; 
float y2=555; 
float diameter=20; 
void setup () 

{ 
size (600, 600); // 设置 画布 大 小 
} 
void draw() 
{ 
background (255); // 设置 背景 颜色 
if (x1<=x2) // 判断 并 改变 加 1 的 坐标 ， 向 圆 2 靠近 
{ 
XxX1++; 
} 
if (y1<=y2) 
{ 
YI 
} 
if (x1>=x2) 
{ 
六 
} 
if (yl1>=y2) 
{ 
y1—; 


} 

background (255) 7 

ellipse (x1, yl, diameter, diameter); // 画 圆 1 
ellipse (x2, y2, diameter, diameter); // 画 圆 2 


2) 在 类 中 进行 成 员 变量 的 定义 。 


第 一 步 ， 将 代码 4-5 中 定义 变量 放 到 类 中 ， 形 成 成 员 函 数 。 将 需要 执行 的 操作 封装 成 函数 ， 变 为 成 员 方 法 放 入 类 中 。 


4-6 
class Spot 
{ 
float xl1,y]1,x2,y2,diameter; // 成 员 变量 
} 


第 二 步 ， 将 代码 4-5 中 的 对 数据 的 操作 和 画 圆 的 动作 封装 为 函数 ， 放 入 类 中 ， 形 成 成 员 方法 ， 再 和 第 一 步 的 代码 4-6 结 合 ， 形 成 含有 成 员 变 量 和 成 员 函 数 的 类 。 
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class Spot 
{ 
float xl,yl,x2,y2,diameter; 
void move () 


{ 


法 ， 判 断 并 改变 圆 1 坐标 


if (x1<=x2) 
{ 

XxX1++; 
} 
if (y1<=y2) 
{ 

yl++; 


if (x1>=x2) 
{ 


x1--; 


} 
if (yl>=y2) 
{ 


} 


Y1--; 


} 
void display() // 成 员 方 法 ， 画 圆 


background (255) 7 
ellipse (xl1, yl, diameter, diameter); 
ellipse (x2, y2, diameter, diameter); 


3) 对 变量 的 初始 化 放 入 类 中 ， 形 成 构造 函数 。 


第 三 步 ， 创 建构 造 浮 数 。 在 代码 4-5 中 ， 将 对 变量 赋 初 值 的 行为 放 入 构造 函数 中 ， 加 上 代码 4-7， 形 成 完整 的 类 。 
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class Spot 
{ 
float xl,yl,x2,y2,diameter; 
Spot (float a,float b,float c,float d,float f£) 
{ 


X1=a7 
yl=b; 
Xx2=C; 
y2=d; 
diameter=f; 
} 
void move () // 成 员 方 法 ， 判 断 并 改变 圆 1 坐 标 


if (x1<=x2) 
{ 
XI1+ 十 7 


if (yl1<=y2) 
{ 

yl++; 
if (x1>=x2) 
{ 

4 ed 
} 
if (y1>=y2) 
{ 

y1--; 
} 


} 

void display() // 成 员 方法 ， 画 贺 
background (255) 7 
ellipse (x1, yl, diameter, diameter); 
ellipse (x2, y2, diameter, diameter); 


4) 完整 程序 及 输出 结果 。 


定义 了 类 ， 接 下 来 创建 对 象 ， 以 及 构建 必要 的 框架 ， 让 程序 得 以 实现 。 


4-9 
创建 类 


Spot s; 
void setup () 1{ 
size(600, 600) 7 // 设置 画布 大 小 
s = new Spot (25,25,500,500,100); // 对 对 象 进行 初始 化 
} 
void draw(){ 
s.move(); // 调用 类 中 的 函数 
s.display(); 


} 
class Spot{ 
float xl,yl,x2,y2,diameter; 
Spot (float a,float b,float c,float d,float f){ 
X1=a7 
yl=b; 
xX2=C; 
Y2=d” 
diameter=f; 
} 
void move(){ 
if (x1<=x2) { 
X1++; 


} 

if (yl1<=y2) { 
yl++; 

if (x1>=x2) { 
Wl 


} 

if (y1>=y2) { 
y1--; 

} 


} 

void display(){ 
background (204); 
ellipse (xl1, yl, diameter, diameter); 
ellipse (x2, y2, diameter, diameter); 


} 


5) 输出 结果 。 结 果 如 图 4-1 至 图 4-4 所 示 。 


总 结 : 使 


类 的 对 比如 下 。 


类 与 不 使 


类 是 面向 对 象 编程 的 基础 ， 优 势 是 让 程序 更 能 清晰 地 表达 出 含义 ， 类 


F 富 了 语言 的 自 定义 数据 类 型 以 及 含义 。 类 使 得 程序 更 容易 实现 系统 的 维护 和 扩 


或 者 扩展 ， 只 需要 修改 少量 的 代码 ， 节 省 大 量 重复 性 的 工作 。 


Processing 等 面向 对 象 语言 的 编程 ， 除 了 小 程序 或 者 完成 某 个 小 算法 可 以 不 需 


类 以 外 ， 其 他 任何 时 候 都 要 通过 类 的 定义 和 封装 来 完成 程序 的 设计 。 


导 


因为 类 把 相同 的 内 容 封装 起 来 ， 一 旦 需 


图 4-1 两 个 不 同 坐标 的 贺 


图 4-2 圆 1 向 国 2 靠 拢 (一 ) 


图 4-3 圆 1 向 国 2 靠 拢 (二 ) 


图 4-4 圆 1 到 达 圆 2 所 在 坐标 


4.3 继承 

所 谓 继 承 ， 就 是 从 父辈 那里 得 到 的 属性 和 行为 。 这 个 继承 而 来 的 类 叫 作 子 类 ， 被 继承 的 是 父 类 。 子 类 不 仅仅 是 完全 照搬 父 类 的 属性 和 行为 ， 而 是 通过 拓展 它 的 父 类 形成 新 的 类 。 如 果子 类 中 的 方法 名 与 
父 类 中 的 方法 名 有 相同 的 函数 原型 ， 那 么 子 类 中 的 方法 将 覆盖 并 蔡 换 父 类 中 的 方法 。 

继承 的 定义 : 特殊 类 的 对 象 具有 其 一 般 类 的 对 象 的 全 部 属性 和 行为 ， 称 为 特殊 类 对 一 般 类 的 继承 。 其 中 ， 特 殊 类 指 的 是 子 类 ， 一 般 类 指 的 是 父 类 。 继 承 需 要 使 用 关键 字 extends。 


生活 中 继承 的 实例 如 图 4-5 所 示 。 


图 4-5 生活 中 的 继承 


从 图 4-5 中 这 棵 生物 继承 树 可 以 看 到 ， 植 物 和 动物 都 继承 自生 物 类 ， 这 样 ， 动 物 和 植物 就 有 了 生物 类 的 属性 和 行为 而 草食 动物 、 肉 食 动物 继承 自动 物 这 个 类 ， 它 们 不 但 具有 生物 的 属性 和 行为 ， 同 时 还 
具有 动物 的 属性 和 行为 。 通 过 继承 ， 子 类 不 用 再 去 重复 设计 和 实现 父 类 已 有 的 属性 和 行为 ， 只 要 直接 通过 继承 即 可 拥有 父 类 的 属性 和 行为 ， 从 而 实现 设计 和 代码 最 大 限度 的 复 用 。 


示例 如 下 。 
父 类 : 水 果 Fruits， 只 有 一 个 成 员 方 法 eat () ， 输 出 “You can eat me”。 


子 类 : 苹果 Apple， 只 有 一 成 员 name () ， 输 出 “1 am apple”。 


4-10 
class Fruits 
{ // 定义 父 类 
void eat(){ // 父 类 所 有 的 属性 


Println ("You can eat me"); 


class Apple extends Fruits 
{ // 定义 子 类 继承 父 类 
void name (){ 
println("I am apple");  // 子 类 所 特有 的 属性 
} 
} 
Apple apple; 
void setup () 
{ 


apple= new Apple(); 
apple.eat (); // 调用 父 类 中 
apple.name () 7 // 调用 子 类 中 


输出 : 

You can eat me 

lam apple 

继承 是 比较 泛 的 概念 ， 例 如 : A 继 承 B 中 “学 习 Processing 的 方法 ”， 但 是 B 中 “学 习 Processing 的 方法 ”是 从 C 继 承 而 来 的 。 此 时 ，A 依 旧 可 以 用 “学 习 Processing 的 方法 ”。 
子 类 从 父 类 中 继承 的 属性 和 行为 ， 可 以 在 父 类 的 父 类 中 定义 ， 也 可 以 在 父 类 的 父 类 的 父 类 .…… 很 多 代 中 定义 。 


继承 中 的 覆盖 父 类 的 方法 : 如 果子 类 中 的 方法 名 与 父 类 中 的 方法 名 有 相同 的 函数 原型 ， 那 么 子 类 中 的 方法 覆盖 并 蔡 换 父 类 中 的 方法 。 想 要 在 子 类 中 使 用 父 类 中 的 方法 或 者 域 ， 需 要 在 子 类 名 字 前 加 上 关 
键 词 super。 


4=-11 
class Apple extends Fruits 
{ // 定义 子 类 继承 父 类 
void eat () 
super.eat () 7 // 调用 父 类 的 eat () 
Println("You can eat me"); // 子 类 所 特有 的 属性 
} 
E 
示例 如 下 。 


父 类 : 4.2 节 中 定义 过 的 Spot 类 。 


子 类 : SpotTrack， 添 加 成 员 方法 track () ， 通 过 鼠标 来 确定 第 二 个 圆 的 坐标 。 


SpotTrack s; 
void setup () 


Size(600, 600) 7 
Ss = new SpotTrack (25,25,555,555,20); 


} 
void draw() 
{ 


s.move(); 
s.display(); 
s.track(); 


} 
class Spot 
{ 
float xl,yl,x2,y2,diameter; 
Spot (float a,float b,float crfloat d,float f£) 
{ 
xl=a; 
yl=b; 
X2=C7 
Y2=d7 
diameter=f; 


// 定义 对 象 


// 设置 画布 大 小 
// 对 对 象 进行 初始 化 


// 调用 父 类 成 员 方法 
// 调用 父 类 成 员 方法 
// 调用 子 类 成 员 方法 


// 成 员 变 量 
// 构造 函数 


} 
void move () // 成 员 方法 ,判断 并 改变 圆 1 的 坐标 


E 

if (x1<=x2) 
{ 

3 二 二 
} 
if (yl1<=y2) 
{ 

yl++; 
if (x1>=x2) 
{ 

Xx1-——; 


} 
if (y1>=y2) 
{ 


YL 
上 


void display() // 成 员 方法 ， 画 圆 
background (255) 7 

ellipse (x1, yl, diameter, diameter); 

ellipse (x2, y2, diameter, diameter); 

} 
class SpotTrack extends Spot // 定义 子 类 
{ 
super (a,b,c,d,e); 


void track() 


Xx2=mouseX; 
y2=mouseY; 


SpotTrack (float a,float b,float c,float d,float e) 


输出 结果 如 图 4-6 所 示 。 


“第 5 章 ”运行 环境 


“第 6 章 2D 图 形 


“第 7 章 颜色 


“第 8 章 ”变换 


“ 第 0 章 ”曲线 


“ 第 10 章 复杂 图 形 


“第 11 章 3D 图形 


“ 第 12 章 位 图 


“第 13 章 文本 


图 4-6” 圆 1 追 踪 圆 2 


第 二 篇 


图 像 图 形 篇 


“ 第 14 章 ”图像 动画 综合 实例 


5.1 “坐标 系统 


Processing 上 进行 的 一 切 绘 


(0) 


\ 
_- 


图 和 动画 都 是 基于 


图 5-1 Processing 坐 标 系 统 


在 显示 效果 上 ， 坐 标 系统 不 会 被 显示 出 来 的 ， 网 格 也 是 不 存在 的 。 读 者 在 绘制 图 形 动画 前 ， 需 在 头脑 中 大 致 建立 一 个 简单 坐标 系 ， 将 所 要 绘制 的 图 形 和 坐标 系 进行 关联 。 


第 5 章 ”运行 环境 


5.1 “坐标 系统 


Processing 上 进行 的 一 切 绘 


图 和 动画 都 是 基于 其 本 身 的 坐标 系统 的 。Processing 的 坐标 系统 与 数学 上 的 直角 坐标 系 有 所 不 同 ， 它 以 左上 角 为 原点 ， 水 平方 向 为 x 轴 ， 竖 直方 向 为 y 轴 ， 如 图 


5-1 所 示 。 


5-1 所 示 。 


(0,0) 


在 显示 效果 上 ， 坐 标 系统 不 会 被 显示 出 来 的 ， 网 格 也 是 不 存在 的 。 读 者 在 绘制 


5.2 主 程 序 结构 


一 个 标准 的 Processing 主 程序 的 结构 格式 如 下 : 


图 5-1 Processing 坐 标 系 统 


图 形 动画 前 ， 需 在 头脑 中 大 致 建立 一 个 简单 坐标 系 ， 将 所 要 绘制 的 图 形 和 坐标 系 进行 关联 。 


void setup () 


void draw() 


开始 作画 
} 


setup() 函数 中 的 程序 块 代码 只 执行 一 次 ,一般 


来 进行 初始 化 设置 ， 如 画布 大 小 、 抗 锯齿 设置 和 填充 色 设置 等 ， 后 


Processing 执 行 完 一 次 setup () 函数 后 就 会 不 断 地 执行 draw () 函数 ， 在 draw () 函数 里 绘制 要 车 
中 绘制 一 个 新 的 帧 ， 运 行 完 一 次 后 再 执行 下 一 次 。 


。draw () 每 运行 一 次 相当 于 在 窗 


示例 : 


H 


不 需要 再 做 改变 的 设置 ， 可 以 放 在 setup () 中 只 运行 一 次 。 


示 的 图 形 ， 并 以 默认 每 秒 60 帧 (60fps) 的 速度 不 断 更 新 重 绘 ， 直 到 收 到 “停止 ”的 命令 或 关闭 窗 


void setup () 
Printlin("1")y 

tld draw () 

Println("2")} 

/ * 输 出 : 

1 


当 要 制作 动画 时 ，draw () 函数 是 必 不 可 少 的 。 


draw () 循环 与 否 是 可 控 的 ， 在 draw () 执行 的 过 程 中 ， 可 以 通过 noLoop () 、loop () 和 redraw () 函数 控制 。 


noLoop () 函数 可 以 结束 draw () 循环 。 


示例 : 


void setup () 


Pintln("1") 7 
noLoop () 


void draw() 
Println (2)s 

} 

/* 输 出 : 

1 


2 
A 


loop () 函数 可 以 开启 draw () 循环 。 
redraw () 函数 可 以 使 draw () 再 执行 一 次 。 以 下 程序 是 使 


示例 : 


redraw () 函数 的 例子 ， 每 当 鼠 标 单 击 一 次 ，draw 就 执行 一 次 。 


int count = 07 
void setup () 


noLoop () 
} 
void draw() 


println (count); 


void mouseClicked() 
{ 


Count ++; 
redraw (); 
E 
/* 输 出 : 
世 
1 // 鼠标 单 击 再 松 开 
2 // 鼠标 单 击 再 松 开 …… // 鼠标 单 击 再 松 开 


要 


5.3 ” 帧 速率 


frameRate () 函数 可 以 设 定 帧 速率 ，Processing 默 认为 每 秒 60 帧 。 


frameRate (75) 7 // 设 定 帧 速率 为 每 秒 75 帧 


帧 速率 的 大 小 按 需要 而 定 ， 通 过 调整 帧 速率 ， 可 以 控制 程序 运行 的 快慢 


frameCount 系 统 变 量 能 够 存储 当前 的 帧 数 ， 它 从 程序 运行 开始 起 计数 ， 


示例 : 


可 以 通过 它 来 查看 当前 帧 数 。 


。 不 能 将 帧 速率 设置 得 很 高 ， 它 与 计算 机 的 系统 性 能 有 关 ， 设 置 过 高 是 达 不 到 效果 的 。 


S$ 
void setup () 


frameRate (1); // 设 定 帧 速率 为 每 秒 1 帧 
dolla draw() 
println(frameCount);  // 显示 当前 帧 数 
/ * 输 出 : 
1 
2 
a 
Af 
5.4 窗口 
在 计算 机 上 绘画 要 考虑 屏幕 尺寸 ，Processing 程 序 能 够 控制 屏幕 上 的 全 部 或 者 一 部 分 像素 点 ， 单 击 Run 按 钮 后 ， 就 会 跳出 一 个 显示 窗口 ， 并 可 以 读 写 其 中 的 像素 。size () 函数 用 于 设置 窗口 的 尺寸。 


size (width, height, mode) 
width: 窗口 的 宽 ， 默 认为 100 像 素 
height: 窗口 的 高 ， 默 认为 100 像 素 
mode: 泻 娄 模式 


5- 了 
size(480, 640) 7 // 设置 窗口 宽 为 480 像 素 ， 高 为 640 像 素 


第 三 个 参数 mode 用 于 设置 图 形 的 渲染 模式 ， 不 设置 则 默认 为 2D 演 染 模式 。 


size(480, 640, P2D); 
size (480, 640, P3D); 


// 设置 为 2D 泻 染 模 式 
// 设置 为 3D 泻 染 模式 


第 6 章 “2D 图 形 


Processing 基 本 的 几何 图 形 绘制 函数 如 表 6-1 所 示 。 


表 6-1 基本 几何 


名 称 对 应 绘制 函数 对 应 绘制 函数 


i point() 四 边 形 quad() 


II ET 


三 角形 triangle() 矩形 rect() 


6.1 点 


在 Processing 图 形 里 ， 一 个 点 的 位 置 用 一 个 x 坐 标 和 一 个 y 坐 标 表示 ， 两 者 以 一 个 逗号 隔 开 。 原 点 坐标 是 (0，0) 。 


点 具有 大 小 ， 与 数学 中 的 点 概念 不 一 样 ， 数 学 概念 中 点 没有 大 小 。 除 非特 别 说 明 ， 默 认 一 个 像素 的 大 小 就 是 一 个 点 。 


point (float x, float y) ; 
X: xX 坐标 


Y: Y 坐 标 


使 用 point () 函数 在 窗口 上 绘制 指定 坐标 的 点 ， 如 图 6-1 所 示 。 


6-1 
point (50, 70); // 在 窗口 坐标 为 (50, 70) 处 绘制 一 个 点 


位 于 中 央 的 点 太 小 ， 需 要 仔细 观察 才能 发 现 ， 而 我 们 在 应 用 中 有 时 需要 调整 点 的 大 小 ， 此 时 需 用 到 strokeWeight () 函数 ， 见 代码 6-2。 


图 6-1 绘 一 个 点 


示例 : 模拟 椒盐 噪声 。 


全 

void setup () 
{ size(800, 600); // 设置 窗口 大 小 为 800x600 

background (0,0,0); // 背景 颜色 设置 为 纯 黑色 

noLoop () // 只 画 一 次 ， 即 Qraw 只 执行 一 次 
} 
void draw () 
{ 

stroke (255, 255, 255); // 设置 点 的 颜色 为 白色 

for (int i=0; i<10000; ++i) // 循环 10000 次 ， 每 次 随机 在 窗口 内 画 一 个 点 


{ 
point (random (800), random(600)); 


代码 执行 结果 如 图 6-2 所 示 。 


图 6-2 ”模拟 椒盐 噪声 


6.2 线段 


line () 函数 画 线段 。 它 有 4 个 参数 ， 前 两 个 参数 设置 线段 的 起 点 ， 后 两 个 参数 设置 线段 终点 ， 这 两 点 确定 一 条 线段 。 


line(float xl1l, float yl, float x2, float y2) ; 
MT 个 9 


yl: 
其 人 
Y2: 
示例 : 
6-3 
line(60, 20, 20, 60); 
// 把 (60,20)、(20, 60) 的 两 个 为 线段 ( 见 图 6-3) 


图 6-3 ”绘制 线段 


示例 : 画 围绕 固定 端点 旋转 的 直线 。 


6-4 
float rad = 0; // 全 局 变量 rad， 表 示 弧 度 
void setup () 


size(800, 600); 


void draw() 
{ 
background (203); 
/* 背 景 颜色 设 定 为 203， 每 次 draw 完 后 都 可 用 此 函数 清 屏 ， 由 此 产生 连贯 动 画 ， 否 则 会 留 下 轨迹 */ 


float xl = 400, yl = 300; // 定义 原 也 就 是 固定 点 坐标 
float x2 = 0, y2 = 0, r= 200;  // 定义 可 变 点 坐标 ， 还 有 半径 
X2 = X1 + r*cos (rad); /7 来 出 322， 这 
y2 = yl + r*sin(rad); 
line (x1, yl, x2, y2); // 连 成 直线 
rad += 0.01; // 更 新 rad， 数 值 越 大 ， 旋 转速 率 越 快 
} 
一 :有 
6.3， 玛 角形 


用 triangle () 函数 来 绘制 三 角形 。 它 有 6 个 参数 ， 每 两 个 参数 定义 一 个 项 点， 连接 3 个 顶点 绘制 三 角形 。 用 triangle () 函数 绘制 的 三 角形 可 以 填充 颜色 。 


triangle (float xl1，float yl,float x2, float y2,float x3, float y3) ; 
Xl1、yl: 第 一 个 顶点 的 坐标 
X2、Y2: 第 二 个 顶点 的 坐标 
X3、Y3: 第 三 个 顶点 的 坐标 


示例 : 
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triangle (25, 25, 75, 50, 50, 75); 
// 3 个 项 点 坐标 分 别 为 (25,25)、(75,50)、(50,75) 的 三 角形 ( 见 图 6-4) 


图 6-4 三 角形 


6.4 四边形 


用 quad () 函数 来 绘制 四 边 形 。 它 有 8 个 参数 ， 每 两 个 参数 定义 一 个 点 ， 由 4 个 顶点 坐标 来 绘制 四 边 形 。 适 当 改 变 这 些 参数 可 以 得 到 正方 形 或 不 规则 四 边 形 。 


quad (float xl,float yl,float x2,float y2,float x3,float y3,float x4,float y4) ; 


Rls Yl: 点 的 坐标 
x2、Yy2: 第 二 个 点 的 坐标 
X3、Y3: 的 坐标 
x4、 y4 点 的 坐标 
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quad (20,20, 50,25, 90,90, 24,70); 
// 以 坐标 分 别 为 (20,20)、(50,25)、(90,90)、(24,70) 的 4 个 点 为 顶点 绘制 四 边 形 ( 见 图 6-5) 


图 6-5” 绘 四 边 形 


6.5 矩形 


rect () 函数 用 来 绘制 矩形 。 它 有 4 个 参数 ， 前 两 个 参数 定位 矩形 左上 角 的 坐标 ， 后 两 个 参数 设置 矩形 的 宽度 和 高 度 。 


Tect (arbrcrd) 7 
上 角 坐 标 
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rect (100, 100, 80, 45); 
// 绘制 左上 角 坐 标 为 (100,100)、 宽 80、 高 45 的 矩形 〈 见 图 6-6) 


图 6-6 ”绘制 矩形 


rectMode (Mode) 用 于 调整 矩形 的 绘制 模式 ， 有 4 种 可 选 模式 。 当 选择 不 同 的 模式 时 ， 形 参 a、b、<、d 的 含义 就 有 所 不 同 ， 如 表 6-2 所 示 。 


表 6-2” 适 形 绘制 模式 表 


绘制 模式 rect() 形 参 变化 

a: 中 心 x 坐标 ， b: 中 心 y 坐标 ; e: 矩形 宽 ，d: 矩形 高 
RADIUS a: 中 心 x 坐标 ; b: 中 心 y 坐标 ; c: 矩形 半 宽 ; d: 矩形 半 高 
a: 左上 角 x 坐标 ; b: 左上 角 y 坐标 ; ce: 算 形 宽 ; d: 逢 形 高 


从 和 矩形 左上 角 绘 制 a: 左上 角 x 坐标 ; b : 左上 角 y 坐标 ; c : 右 下 角 x 坐标 ; d: 右 
CORNERS Es 
下 角 y 坐标 


从 和 矩形 中 心 绘制 
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rectMode (CORNERS) 7 
rect (100, 100, 180, 145); 
/* 绘 制 左上 角 坐 标 为 (100,100) ， 右 下 角 坐 标 为 (180,145) 的 矩形 ( 见 图 6-6) */ 


代码 6-8 的 绘制 效果 与 代码 6-7 一 样 。 可 见 使 用 不 同 的 模式 ， 绘 制 结果 可 以 是 一 样 的 。 绘 制 模式 的 选择 取决 于 实际 需要 和 使 用 便捷 。 


6.6 椭圆 


用 ellipse () 函数 来 绘制 椭圆 。 它 有 4 个 参数 ， 前 两 个 参数 定位 其 中 心 点 ， 第 三 个 参数 设置 椭圆 宽度 ， 第 四 个 参数 设置 椭圆 高 度 。 


llipse (a,b,c,d) 
了 Pb: 中 心 点 坐标 
完 


e 
a 
c 
d: 高 


示例 : 


| 
ellipse(100,100,110, 60) 7 
// 绘制 中 心 点 坐标 为 (100,100) ， 宽 110、 高 60 的 椭圆 ( 见 图 6-7) 


与 rectMode () 相似 ，ellipseMode (Mode) 用 于 调整 椭圆 的 绘制 模式 ， 有 4 种 可 选 模式 。 当 选择 不 同 的 模式 时 ， 形 参 a、b、c、d 的 含义 有 所 不 同 ， 如 表 6-3 所 示 。 


图 6-7” 绘 椭圆 
表 6-3 椭圆 绘制 模式 表 


绘制 模式 ellipse() 形 参 变化 
从 燃 轩 由 心 私 抽 CENTER (默认 模式 )| a: | b: es c: 天 d: Ee 
a: 中 心 x 坐标 ; b: 中 心 y 坐标 ; ec: 椭圆 半 宽 ; d: 椭圆 半 高 
a : 外 接 和 矩形 左上 角 x 坐 标 ; b : 外 接 和 矩形 左上 角 y 坐标 ; c: 矩 


CORNER 
根据 椭圆 外 接 和 矩形 形 宽 ; d: 矩形 高 
绘制 i a : 外 接 矩 形 左 上 角 x 坐标 ; b : 外 接 和 矩形 左上 角 y 坐标 ; c: 外 
接 和 矩形 右 下 角 x 坐标 ; d: 外 接 和 矩形 右 下 角 y 坐标 
示例 : 


rectMode (CORNERS) 
ellipse (100,100,110, 60) 7 
// 绘制 中 心 点 坐标 为 (100,100) ， 宽 110、 高 60 的 椭圆 〈 见 图 6-7) 


可 以 看 到 ， 代 码 6-10 的 绘制 效果 与 代码 6-9 相 同 。 


6.7” 描 边 属性 


前 面 提 到 过 ， 图 形 分 为 描 边 和 填充 。Processing 可 以 使 用 描 边 属性 函数 改变 描 边 ， 进 而 改变 图 形 ， 如 表 6-4 所 示 。 


表 6-4 描 边 属性 函数 表 


画 丽 作用 作 ”月 
strokeWeight() 设置 描 边 粗细 描 边 不 作 平滑 处 理 
strokeCap() 设置 直线 的 端点 形状 描 边 作 平滑 处 理 


stroke() 设置 描 边 颜色 不 显示 描 边 


strokeJoin() 设置 描 边 拐角 形状 | | 


注意 ” 描 边 属性 函数 是 全 局 修改 的 ， 在 绘图 前 使 用 才能 生效 ， 必 要 时 要 设置 回 原来 的 值 ， 否 则 在 后 面 的 绘图 中 ， 描 边 属性 将 一 直 不 变 。 


strokeWeight () 函数 可 设置 描 边 粗细 ， 使 画 出 的 点 看 起 来 更 大 。 


strokeWeight (float weight) 
weight: 描 边 粗细 ， 默 认为 1 


示例 : 
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strokeWeight (10); 
point (50, 70); // 在 窗口 坐标 为 (50, 70) 处 绘制 一 个 点 ( 见 图 6-8) 
strokeWeight (1); 


图 6-8 绘制 大 点 


strokeCap () 函数 可 设置 直线 的 端点 形状 。 


strokeCap (Mode) 
Mode: 端点 模式 ， 有 3 种 模式 ( 见 表 6-5) 


表 6-5 直线 端点 模式 表 


模 式 端点 形状 特 点 
ROUND (默认 模式 ) 圆 形 大 于 实际 直线 长 度 
SQUARE 方形 和 实际 直线 等 长 
PROJECT 方形 大 于 实际 直线 长 度 


示例 : 
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size (800, 600); // 定义 一 个 长 800、 宽 600 的 窗口 
strokeWeight (80) 7 // 设置 描 边 粗细 为 80 
strokeCap (ROUND) ; // 默认 模式 


line(200, 330, 600, 330); 
strokeCap (SQUARE) ; // 端点 模式 为 方形 ， 与 实际 直线 长 度 相等 
line(200，300，600，300); // 用 指定 两 点 做 线段 ( 见 图 6-9) 


图 6-9 ROUND 模式 和 SQUARE 模式 比较 图 


stroke () 可 设置 描 边 颜色 。 


strokejoin () 可 设置 描 边 拐角 形状 。 


strokeJoin (Mode) 


Mode: 扬 角 模式 ， 有 3 种 拐角 模式 ( 见 表 6-6) 


表 6-6 ”图形 拐角 模式 表 


模 式 端点 形状 
MITER (默认 模式 ) 尖 角 


BEVEL 斜 角 
ROUND 圆 角 
示例 : 
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size(800, 600); // 定义 一 个 长 800、 宽 600 的 窗口 
strokeWeight (10); 
strokeJoin (ROUND) ; // 设置 扬 角 模式 为 团 角 
triangle (360, 300, 450, 300, 400, 380); // ( 见 图 6-10) 


smooth () 和 noSmooth () 用 于 描 边 平滑 处 理 ， 它 们 都 没有 形 参 。 与 size () 类 似 ， 使 用 时 一 般 在 setup () 中 调用 一 次 即 可 。 


图 6-10 圆 角 拐角 模式 绘 三 角形 


示例 : 
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size (800,600); 
background (0); 
nostroke (); 


Smooth (); 

ellipse (30, 48, 36, 36); 

noSmooth (); // 关闭 平滑 处 理 
ellipse (70, 48, 36, 36); // ( 见 图 6-11) 


图 6-11 smooth () ( 左 ) 和 noSmooth () ( 右 ) 效果 


6.8 灰 度 值 


background () 、stroke () 和 fill () 函数 。background () 可 以 设置 显示 窗口 的 背景 色 ， 其 参数 


Processing 绘 图 默认 的 是 浅 灰色 背景 、 黑 色 线 条 ， 以 及 白色 的 图 形 。 若 想 改 变 这 些 默 认 值 ， 需 
为 0~255。0 代 表 黑色 ，255 代 表白 色 ， 二 者 之 间 是 各 种 灰 度 值 。 如 果 没 有 定义 背景 色 ， 默 认 使 用 的 值 是 204 浅 灰色 。 


县 


形 的 画笔 色 或 填充 色 是 可 以 禁用 的 ,使 用 noStroke () 函数 不 绘制 


白色 ,一 个 


[ 


stroke () 和 fill () 函数 设置 画笔 色 和 填充 色 。 如 果 没有 定义 ， 默 认 的 画笔 色 是 0， 即 黑色 ， 默 认 值 的 填充 色 是 255， 即 
轮廓 线 ， 使 用 noFil () 函数 则 填充 色 消失 。 


示例 : 


background (235) 7 
fil11(204) 7 
ellipse (30, 30, 50, 50); 
fill] (153):» 
ellipse (50, 50, 50, 50); 
fil1(0)7 

ellipse (70,70, 50,50); 


结果 如 图 6-12 所 示 。 


图 6-12 ”填充 属性 


最 后 以 两 个 2D 图 形 的 综合 实例 来 概括 本 章 的 学 习 。 


示例 一 : 两 顶点 固定 ， 随 意 变形 的 三 角形 。 
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float x2 = random(800), y2 =random(600); 
// 终点 坐标 (xX2,y2) 。 它 的 位 置 是 随机 的 


float xl = 400, yl = 350; // 动 点 初始 坐标 (x1,y1) 


float space = 1; // 间隔 
Eloat ¥ = xlyp ¥ = Ys // 当前 坐标 (x,y) 
void setup () 


size(800, 600); 


} 

void draw() 

{ 
background (203); 
float radian = atan2 (y2-yl, x2-x1); 
float dx = cos(radian) * space; 


float dy = sin(radian) * space; 泣 量 dy 
float dis = dist (xl,yl, x2,y2); // 计算 两 点 距离 dis 
if(dist (xl,yl, x,y) <= dis) // 若 当前 坐标 没有 到 达 终 点 坐标 


strokeWeight (1); 
triangle (x，y， 350，300，425，300); // 绘制 三 角形 
// 改变 当前 坐标 


x += dx; 


else // 若 到 了 终点 坐标 
// 将 初始 坐标 更 新 为 终点 坐标 


X1 = X7 


党 
// 将 终点 坐标 重新 随机 取 值 
random (800); 
random (600); 


运行 结果 如 图 6-13 所 示 。 截 图 为 静态 ， 实 际 为 动画 效果 。 


图 6-13 ”变形 三 角形 


示例 二 : 绘制 时 钟 动画 ( 非 精准 时 间 ) ， 如 图 6-14 所 示 。 
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// 定义 秒 分 时 针 的 初始 弧度 
float secRad = 3*PI/2, minRad = 3*PI/2, houRad = 0; 
void setup () 


size(800, 600); 
} 
void draw() 
和 


background (203); 

// 该 函数 用 于 画 静 态 时 间 轴 

clock (400, 300, 90, 110, 60); 

// 定义 时 钟 中 心 坐标 ， 秒 分 时 针 的 长 度 

float originX = 400, originY = 300, secR = 80, minR = 80, houR = 60; 


float Speed = 0.0017; // 旋转 速度 ， 与 真实 时 间 轴 存在 误差 
// 画 秒针 全 过 程 

float endx = originX + secR * cos (secRad); 
float endY = originY + secR * sin(secRad); 
strokeWeight (2); 

line (originx, originY, endx, endY); 
strokeWeight (1) 7 

// 画 分 针 全 过 程 

endX = originX + minR * cos (minRad) 7 

endY = originY + minR * sin (minRad) 7 
strokeWeight (3); 

line (originx, originY , endx, endY); 
strokeWeight (1); 

// 画 时 针 全 过 程 

endX = originX + houR * cos (houRad) 7 

endY = originY + houR * sin (houRad) 7 
strokeWeight (5); 

line (originx, originY , endx, endY); 
strokeWeight (1); 

// 设置 弧度 关系 

secRad += Speed; 

minRad += Speed/60; 

houRad += Speed/720; 


} 
// 务 静 态 时 间 轴 ， 时 间 轴 中 心 坐标 (x, y) 、 内 径 r1、 外 径 r[2、 轴 数 n 
void clock(float x, float y, float rl, float r2, float n) 
{ 
float radian = 3*PI/2; 
float r; 
for (int i=0; i<n; ++i) 
{ 
if(i%5 == 0) 
{r = rl-3;} 
else 
{r = rl+10;} 
float stratx 
float StratY 


X+ cos(radian) * r; 
y+ sin(radian) * r; 
float endx = + cos(radian) * r2; 
float endY = + Sin (radian) * r2; 
line (stratX, stratY, endxX, endY); 
radian += TWO _PI/n; 


Hl 


出 


6-14 所 示 。 截 


为 静态 ， 实 际 为 动画 效果 。 


总 
dl 
吕 
六 
当 
网 


图 6-14 ”时 钟 静态 图 


第 7 章 颜色 
7.1 色彩 模式 


在 计算 机 中 ， 指 定 颜 色 的 方法 有 很 多 种 。 例 如 RGB 模式 、CMYK 模 式 、HSB 模 式 、Lab 模 式 等 。Processing 支 持 RGB、HSB 两 种 色彩 模式 。 


Processing 默 认 的 色彩 模式 是 RGB 色彩 模式 。 


RGB 色彩 模式 是 由 红 (R) 、 绿 (G) 、 蓝 (B) 3 种 颜色 通道 来 表示 的 色彩 ， 每 个 通道 由 0~255 的 值 来 表示 该 通道 的 颜色 强度 ， 通 过 设置 每 个 通道 不 同 的 颜色 强度 值 ， 就 可 以 得 到 各 种 各 样 的 颜色 ， 如 : 
RGB 为 (255，0，0) 表示 纯 红色 。 不 难 算出 总 共 可 以 表示 的 颜色 种 数 有 2563 种 。 


HSB 色 彩 模式 是 由 色相 (H) 、 饱 和 度 (S) 、 明 度 (B) 表示 的 。 色 相 表 示 色 彩 的 相貌 ， 例 如 红 、 黄 、 蓝 等 ， 用 0~360 来 表示 不 同色 相 的 颜色 ;饱和 度 表示 色彩 的 鲜艳 程度 ， 用 0~100 来 表示 ; 明度 是 
表示 颜色 的 明暗 程度 或 者 颜色 的 深浅 ， 用 0~ 100 来 表示 ， 如 : HSB 为 (0，100，100) 表示 纯 红色 。 


第 7 章 颜色 


71 yt 


在 计算 机 中 ， 指 定 颜 色 的 方法 有 很 多 种 。 例 如 RGB 模 式 、CMYK 模 式 、HSB 模 式 、Lab 模 式 等 。Processing 支 持 RGB、HSB 两 种 色彩 模式 。 


Processing 默 认 的 色彩 模式 是 RGB 色彩 模式 。 


RGB 色彩 模式 是 由 红 (R) 、 绿 (G) 、 蓝 (B) 3 种 颜色 通道 来 表示 的 色彩 ， 每 个 通道 由 0~255 的 值 来 表示 该 通道 的 颜色 强度 ， 通 过 设置 每 个 通道 不 同 的 颜色 强度 值 ， 就 可 以 得 到 各 种 各 样 的 颜色 ， 如 : 
RGB 为 (255，0，0) 表示 纯 红色 。 不 难 算出 总 共 可 以 表示 的 颜色 种 数 有 2563 种 。 


HSB 色 彩 模式 是 由 色相 (H) 、 饱 和 度 (S) 、 明 度 〈B) 表示 的 。 色 相 表 示 色 彩 的 相貌 ， 例 如 红 、 黄 、 蓝 等 ， 用 0~360 来 表示 不 同色 相 的 颜色 ;饱和 度 表示 色彩 的 鲜艳 程度 ， 用 0~100 来 表示 ; 明度 是 
表示 颜色 的 明暗 程度 或 者 颜色 的 深浅 ， 用 0~100 来 表示 ， 如: HSB 为 (0，100，100) 表示 纯 红色 。 


7.2 ”创建 颜色 


在 创建 颜色 前 ， 有 必要 确定 使 用 哪 种 色彩 模式 。 


colorMode () 用 于 设置 色彩 模式 和 各 分 量 的 最 大 值 。 


该 函数 有 多 种 重 载 类 型 : 


1.colorMode (mode) 


mode: 色彩 模式 ， 有 RGB (默认 ) 和 HSB 选 择 。 


如 果 选 RGB， 默 认 各 分 量 最 大 值 为 255。 


如 果 选 HSB， 默 认 各 分 量 最 大 值 为 255。 


colorMode (100) ; 
// 色彩 模式 默认 选取 RGB， 各 通道 最 大 值 都 设置 为 100 


2.colorMode (mode，max1，max2，max3) 


输入 max1~max3 能 重 置 各 分 量 的 最 大 值 。 


默认 状态 下 ，HSB 各 分 量 最 大 值 为 255、255、255， 与 标准 的 360、100、100 有 所 不 同 ， 所 以 可 用 此 函数 修改 。 
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colorMode (HSB, 360, 100, 100); 
// 色彩 模式 选取 HSB， 各 通道 最 大 值 分 别 设置 为 360、100、100 


3.colorMode (mode，max1，max2，max3，maxA) 


maxA: 指 不 透明 度 。 
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Ce 360,100,100,100) 
// 色彩 模式 选取 HSB， 各 通道 最 大 值 分 别 设置 为 360、 100、100， 不 透明 度 为 100 


4.colorMode (mode, max) 


max 为 各 通道 统一 的 最 大 值 。 


7-4 
colorMode (HSB, 100); 
// 色彩 模式 选取 HSB， 各 通道 最 大 值 都 设置 为 100 


注意 ”如果 采 用 RGB 色彩 模式 且 不 需要 调整 最 大 值 ， 则 可 以 省 略 调用 此 函数 。 


确定 了 使 用 哪 种 色彩 模式 后 ， 就 开始 创建 颜色 。 


color () 用 于 创建 颜色 ， 返 回 值 是 一 个 color 类 型 变量 (本 质 是 整 型 ) 。 它 有 以 下 几 种 重 载 函数 : 


color (v1, v2, v3) 

color (v1, v2, v3, alpha) 

color (gray, alpha) 

v1~v3: 各 通道 的 强度 ; gray: 颜色 灰 度 ; alpha: 不 透明 度 ， 默 认 最 大 ( 即 不 透明 ) 。 
上 述 值 的 默认 范围 均 为 0~255， 可 通过 colorMode () 调整 ， 超 过 则 算 最 大 值 。 


RGB 模式 ， 创 建 一 个 红色 。 


了 -5 
color C = color (255, 0,0); 


// 创建 一 个 红色 ， 并 存放 在 颜色 变量 c 中 


RGB 模式 ， 创 建 一 个 半 透 明黄 色 。 


7-6 
color c = color (255,255,0,128); 
// 创建 了 一 个 半 透 明黄 色 ， 并 存放 在 颜色 变量 c 中 


HSB 模 式 ， 创 建 一 个 半 透 明黄 色 。 


7-7 
colorMode (HSB, 360, 100,100, 255); 
// 设 定 色彩 为 HSB 并 调整 范围 
color c = color(60,56,90,128); 
// 创建 一 个 半 透 明黄 色 ， 并 存放 在 颜色 变量 c 中 


7.3 ”设置 描 边 与 填充 颜色 


stroke () 重 载 函 数 用 于 设置 描 边 颜色 。 


Stroke (c) 

stroke (v1, v2,v3) 
stroke (v1, v2,v3, gray) 
stroke (gray, alpha) 

C: 颜色 变量 

V1~vV3: 各 通道 的 强度 
gray: 颜色 灰 度 

alpha: 颜色 的 不 透明 度 


示例 : 


7-8 
color c = color (255,0,0); 
stroke (c); // 设置 描 边 颜色 采用 c 颜 色 
rect (10, 10, 50, 50); 


示例 : 


了 -5 
stroke (255, 0,0); // 直接 设置 描 边 颜色 
rect (10, 10, 50, 50) 7 


fill () 重 载 函数 用 于 设置 填充 颜色 。 


C: 颜色 变量 

V1~v3: 各 通道 的 强度 
gray: 颜色 灰 度 
alpha: 颜色 的 不 透明 度 


示例 : 


color c = color (60,56, 90,128); 
fil 4c)y // 设置 填充 颜色 采用 c 颜 色 
rect (10,10, 50, 50); 


示例 : 


7-11 
fil1(60,56, 90,128); // 直接 填充 颜色 
rect (10,10,50,50) 7 


综合 示例 : 


Size(800, 600) 7 

colorMode (HSB, 360, 100,100, 255); 

// 创建 一 个 半 透 明黄 色 ， 并 存放 在 颜色 变量 c 中 

Color c = color (60,56, 90,128) 7 

£ill (c); // 设置 填充 颜色 为 C 
stroke (240, 100,100); // 设置 描 边 颜色 为 纯 蓝 色 
triangle (360, 300, 450, 300, 400, 380); 


结果 如 图 7-1 所 示 。 


图 7-1 有 描 边 填充 颜色 的 三 角形 


background () 用 于 设置 全 屏幕 颜色 。 


background (c) 
C: 颜色 变量 


示例 : 


background (255); // 背景 白色 
background (255,0,0); // 背景 红色 


7.4 读 取 颜 色 分 量 


为 获取 一 种 颜色 的 各 个 颜色 分 量 ，Processing 提 供 了 许多 的 获取 颜色 分 量 的 函数 ， 如 表 7-1 所 示 。 


表 7-1 读 取 颜 色 分 量 函 数 表 


red(color c) 
green(color c) 
blue(color c) 
hue(color c) 
saturation(color c) 


brightness(color c) 


alpha(color c) 


示例 : 鼠标 移动 时 背景 颜色 渐变 。 


void setup () 
{ 
size (800,600); 


colorMode (HSB, 360, 100, 100); 


void draw() 


{ 


作 用 
获取 红色 分 量 
获取 绿色 分 量 
获取 蓝 色 分 量 
获取 色相 
获取 饱和 度 
获取 明度 


获取 不 透明 度 


// 切换 至 HSB 色 彩 模式 


Color c = color (map (mouseX,0, width,0,360), 100, 100); 
// 创建 颜色 ，map 函 数 将 鼠标 的 范围 0~ width (800) 到 映射 到 0~360 


background (c); 
println (red(c) ) 7 


// 屏幕 背景 颜色 为 C 
// 输出 颜色 的 红色 分 量 


第 8 章 ”变换 


Processing 中 一 切 的 绘画 或 动画 都 是 基于 坐标 系 的 ， 通 过 变换 可 以 改变 坐标 轴 ， 使 得 绘画 或 动画 都 基于 新 的 坐标 系 。 利 上 
函数 来 实现 变换 ， 以 下 重点 列举 几 个 ， 如 表 8-1 所 示 。 


VE 数 


变换 来 绘 


或 设计 动画 ， 有 时 可 以 大 幅 


作 用 


度 节 省 计算 量 。Processing 提 供 了 一 些 


translate 原点 位 移 
rotate 坐标 轴 顺 时 针 旋 转 
scale 坐标 轴 缩 放 
shearX 只 对 立轴 进行 逆 时 针 旋 转 
shearY 只 对 X 轴 进 行 顺 时 针 旋 转 
8.1 变换 函数 
translate () 函数 用 于 将 坐标 原点 移 至 (x，y) 。 
村人 和 间 
示例 : 
8-1 


voct 0 Vy S555} 
translate (30, 20); 
Toot:(0 Di S55; SO)F 
translate (14, 14); 
Tect(0; UO, S55 55} 


// 将 坐标 原点 移 至 (30，20) 
// 将 坐标 原点 移 至 (14，14) 


结果 如 图 8-1 所 示 。 


rotate () 函数 用 于 将 图 形 以 坐标 原点 为 中 心 顺 时 针 旋转 oa 弧度。 
rotate (a)a: 旋转 弧度 
示例 : 

8-2 


translate (40, 20); 
rect (0,0,50,50); 
rotate (PI/4); 

rect (10,10,50, 50); 


结果 如 图 8-2 所 示 。 


图 8-1 位 移 


图 8-2 旋转 


scale () 函数 用 于 缩放 坐标 轴 。 


scale (n) 

n: 缩放 系数 ， 默 认为 
Scale (nl,n2) 

nl: x 轴 缩放 系数 ， 默 认为 1 
n2: Y 轴 缩放 系数 ， 默 认为 1 


示例 : 
i 
rect (30, 20, 50, 50); 
scale (0.5); 
rect (30, 20, 50, 50); 
结果 如 图 8-3 所 示 。 
示例 : 
8-4 


rect (30, 20, 50, 50); 
scale(0.5, 1.3); 
rect (30, 20, 50, 50); 


结果 如 图 8-4 所 示 。 


图 8-3 ”缩放 


shearX () 用 于 对 Y 轴 进行 逆 时 针 旋转 。 


图 8-4 ”缩放 2 


ShearX (x)x: 旋转 弧度 


示例 : 
人 -5 
translate (width/2, height/2); 
shearXx (PI/4.0); 
rect (0, 0, 30, 30); 
结果 如 图 8-5 所 示 。 
shearY () 用 于 对 X 轴 进行 逆 时 针 旋转 。 
shearY (a)a: 旋转 弧度 
示例 : 
ds 


translate (width/2, height/2); 
shearyYy (PI/4.0); 
rect (0, 0, 30, 30); 


结果 如 图 8-6 所 示 。 


图 8-5 shearX 


8.2 ”变换 作用 域 


当 绘 制 多 个 图 形 时 ， 可 能 需要 不 同 的 变换 ， 但 不 希望 前 一 个 图 形 的 变换 二 加 到 下 一 个 图 


这 两 个 函数 没有 返回 值 ， 也 没有 形 参 。 


图 8-6 shearY 


形 的 变换 中 ， 所 以 限定 作用 域 十 分 重要 。Processing 中 提供 pushMatrix () 和 popMatrix () 函数 来 限定 作用 


pushMatrix(); // 表明 本 次 变换 开始 (变换 域 ) // 在 本 区 域内 变换 ， 
popMatrix(); // 清除 变换 效果 ， 恢 复 坐 标 系 


绘图 


注意 ”pushMatrix () 和 popMatrix () 必须 配套 使 用 ， 不 能 单独 用 一 个 。 


示例 : 


8= 了 
£111 (255)} 
reat (0 Or 50 SO // 和 白色 短 形 
PushMatrix() 7 
translate (30, 20); 
£i11 (0); 
rect (0, 0, 50, 50); // 黑色 矩形 
popMatrix(); 
fi11 (100); 
rect (15，10，50，50); // 灰色 纸 形 


结果 如 图 8-7 所 示 。 


pushMatrix () 和 popMatrix () 能 够 嵌 套 使 用 。 


示例 : 


B= 
size(200, 200); 
pushMatrix(); 
translate (10, 10); // 将 坐标 原点 移 至 (10，10) 
PushMatrix() 7 
translate (20, 20); // 将 坐标 原点 移 至 (20，20) 
rotate (PI/6); // 将 坐标 轴 顺 时 针 旋 转 30” 
rect (0, 0, 50, 50); 
PoPMatrix () 7 // 清除 translate (20，20)、rotate (PI/6) 变换 效果 
rect (0, 0, 50, 50); 
popMatrix () 7 // 清除 translate (10，10) 变换 效果 


结果 如 图 8-8 所 示 。 


图 8-7 作用 域 


第 


| 


图 8-8 庶 套 


9 章 曲线 


简单 曲线 


客 函 数 y=x" 对 于 建立 简单 的 曲线 非常 有 用 。 在 pow () 函数 中 ， 使 用 正规 化 的 数值 可 以 产生 呈 指 数 增加 或 减少 且 不 会 超过 1 的 数 。 


示例 1: 沿 着 y=x4 曲 线 画 一 系列 的 点 ，xE [0，100]， 如 图 9-1 所 示 。 


SI 
for (int x=0;x<100;x++) // 从 0~100 的 数 选 代 
{ 
float n=norm(x,0.0,100.0); // 区 间 (0.0,1.0) 
float y=pow (ny 4) 7 // 计算 曲线 
yx=1007 // 区 间 (0.0,100.0) 


point (xvy) 7 


示例 2: 沿 着 y=x4 曲 线 画 一 系列 的 圆 ，xE [0，100]， 如 图 9-2 所 示 。 


当 广 
noFill (); // 不 填充 
smooth(); 
size (150,150, P2D) ; 
for (int x=0;x<100;x+=5) 
{ 


float n=norm(x,0.0,100.0); 
float y=pow (ny 4); 

y*=100; 

strokeWeight (n*5); ”// 线条 粗细 
ellipse (x,y, 120,120); 


示例 3: 从 显示 窗口 顶部 画 垂直 线 至 曲线 y=x6，xE (-1.0，1.0) ， 如 图 9-3 所 示 。 


图 9-1 4 次 蛙 运 动 的 曲线 


图 9-2 ”4 次 需 运 动 的 圆 


9-3 
for (int x=5;x<100;x+=3) 
{ 
float n=map (x,5,95,-1,1); // 区 间 转 换 
float p=pow (n, 6); 
float ypos=lerp(20, 80,p); // 线性 插值 
line (x,0,x, ypos); 
} 
示例 4: 绘制 从 y=xe 到 y=x5 的 梯度 ， 如 图 9-4 所 示 。 
9-4 
for (int x=0;x<100;x++) 
{ 
float n=norm(x,0.0,100); // 正规 化 x 
float val=sq(n) *255.0; // D 的 平方 x255 赋 值 给 val 
stroke (val) 7 // 描 边 的 粗细 
line (0, xy 50, x); // 画 直线 
float valSquare=pow (ny 5) *255.0; // n5x255 


stroke (valSquare); 
line (60,x,100,x); 


图 9-3 y=x6 曲 线 


图 9-4 y=x2 到 y=x5 的 梯度 


曝 函 数 y=x" 对 于 建立 简单 的 曲线 非常 有 用 。 在 pow () 函数 中 ， 使 用 正规 化 的 数值 可 以 产生 旦 指数 增加 或 减少 且 不 会 超过 1 的 数 。 


示例 1: 沿 着 y=x4 曲 线 画 一 系列 的 点 ，xEe [0，100]， 如 图 9-1 所 示 。 


9-1 
for (int x=0;x<100;x++) // 从 0~100 的 数 选 代 
攻 
float n=norm(x,0.0,100.0); // 区 间 (0.0,1.0) 
float y=pow (n,4); // 计算 曲线 
Yx=1007 // 区 间 (0.0,100.0) 


point (x,y); 


示例 2: 沿 着 y=x4 曲 线 画 一 系列 的 圆 ，xE[0，100]， 如 图 9-2 所 示 。 


D 


9-2 
noFill (); // 不 填充 
Smooth (); 
size(150,150, P2D); 
for (int x=0;x<100;x+=5) 


float n=norm(x,0.0,100.0); 


float Y=pow (ny 4) 7 

Yx*=1007 

strokeWeight (nx*5);  // 线条 粗细 
ellipse (x,y, 120,120); 


示例 3: 从 显示 窗口 顶部 画 垂直 线 至 曲线 y=x6，xE (-1.0，1.0) ， 如 图 9-3 所 示 。 


图 9-1 4 次 晨 运 动 的 曲线 


图 9-2 ”4 次 需 运 动 的 圆 


9-3 
for (int x=5;x<100;x+=3) 
{ 
float n=map (x,5,95,-1,1); // 区 间 转 换 
float p=pow (n, 6); 
float ypos=lerp(20, 80,p); // 线性 插值 
line (x,0,x, ypos); 
} 
示例 4: 绘制 从 y=xe 到 y=x5 的 梯度 ， 如 图 9-4 所 示 。 
9-4 
for (int x=0;x<100;x++) 
{ 
float n=norm(x,0.0,100); // 正规 化 x 
float val=sq(n) *255.0; // D 的 平方 x255 赋 值 给 val 
stroke (val) 7 // 描 边 的 粗细 
line (0, xy 50, x); // 画 直线 
float valSquare=pow (ny 5) *255.0; // n5x255 


stroke (valSquare); 
line (60,x,100,x); 


图 9-3 y=x6 曲 线 


图 9-4 y=x2 到 y=x5 的 梯度 


贝 塞 尔 曲线 由 法 国 工程 师 Pierre Bézie 于 1962 年 提出 。 贝 塞 尔 曲 线 广泛 应 用 于 设计 行业 。 一 条 贝 塞 尔 曲 线 由 两 个 锚 点 和 两 个 控制 点 组 成 ， 曲 线 的 两 端 是 两 个 锚 点 ， 控 制 点 影响 着 曲线 的 形状 。 


Processing 中 绘制 贝 塞 尔 曲线 用 bezier () 函数 。 


bezier () 定义 了 贝 塞 尔 曲线 的 两 个 控制 点 的 位 置 和 两 个 锚 点 。 


bezier (vxl1,vyl, Cx1, cy2, Cx2, Cy2, Vx2, Vy2); 
(vxl,Vy1)、 (VX2,Vy2) 分 别 表 示 两 个 锚 点 坐标 
(cx1l, cy2) 、 (cx2, cy2) 分 别 表示 两 个 控制 点 坐标 


示例 1: 


size(200,200); 

noFil]l (); 

stroke (255, 102, 0); 

bezier (100, 120, 130, 80, 70, 50, 15, 80); 


9-5 所 示 。 


运行 结果 如 


区 


9-6 所 示 。 


区 


示例 2: 鼠标 交互 动画 。 绘 制 贝 塞 尔 曲 线 的 两 个 锚 点 和 控制 点 ， 当 鼠标 拖 动 它们 的 时 候 实时 更 新 坐标 绘制 贝 塞 尔 曲 线 ， 如 


9-6 
int fisAnx=100, fisAnY=100; // 第 一 个 锚 点 的 x、Y 坐 标 


int secAnX=200, secAnY=100; 第 二 个 锚 点 的 x、y 坐 标 


int fisConX=50, fisConY=200; xX、y 坐 标 

int secConX=250, secConY=200; // 第 二 个 控制 点 x、y 坐 标 

int radius=20; // 绘制 圆 的 半径 

float fisAn, secAn,fisCon, secCon; // 鼠标 分 别 到 两 个 锚 点 和 两 个 控制 点 的 距离 


void setup() { 
size(600, 600); 
smooth () 7 


void draw() { 
background (204); 
noFill(); 
ellipse (fisAnx, fisAnY, radius, radius); 
ellipse (secAnXx, secAnY, radius, radius); 
ellipse (fisConX, fisConY, radius, radius); 
ellipse (secConX, secConY, radius, radius); 
stroke (255, 0, 0); 
bezier (fisAnx, fisAnY, fisConX, fisConY, secConX, secConY, secAnX, secAnY); 

// 画 出 贝 塞 尔 曲线 
} 


void mouseDragged () { /* 建 立 一 个 鼠标 拖 动 事件 ， 获 取 鼠 标 坐 标 到 贝 塞 尔 曲线 4 个 点 的 距离 */ 
fisAn=dist (fisAnX, fisAnY, mouseX, mouseY); 
secAn=dist (secAnX, secAnY, mouseX, mouseY); 
fisCon=dist (fisConX, fisConY, mouseX, mouseY); 
secCon=dist (secConX, secConY, mouseX, mouseY); 


/* 如 果 鼠 标 到 某 一 点 的 距离 小 于 国 的 半径 ， 则 将 该 点 的 x 坐标 设置 为 鼠标 x 坐标 ， 该 点 的 y 坐 标 设置 为 鼠标 的 y 坐 标 */ 


if (fisAn<radius) { 
fisAnX=mouseX; 
fisAnY=mouseY; 

} 

if (secAn<radius) { 
secAnX=mouseX; 
secAnY=mouseY; 


} 

if (fisCon<radius) { 
fisConX=mouseX; 
fisConY=mouseY; 


if (secCon<radius) { 
secConX=mouseX; 
secConY=mouseY; 


图 9-5 


贝 塞 尔 曲线 


通过 这 个 例子 ， 可 以 更 加 直观 地 感受 到 锚 点 、 控 制 点 与 贝 塞 尔 曲线 的 形状 的 关系 。 


第 10 章 ”复杂 图 形 


10.1 绘制 多 边 形 


月 


反 


示例 : 


图 9-6 ”鼠标 控制 贝 塞 尔 曲线 


前 面 学 会 画 三 角形 、 正 方形 、 四 边 形 这 些 简 单 图 形 ， 那 么 如 何 画 多 边 形 呢 ? 用 很 多 条 直线 首尾 相连 起 来 是 最 容易 想到 的 办 法 。 下 面 的 示例 是 用 line () 函数 来 实现 矩形 的 绘制 ， 如 图 10-1 所 示 。 


£ill (#FF0000); 


line(30,10,80,10); 


10-1 
// 填充 红色 
// 画 直 线 


line (80,10, 80, 80); 
line (80, 80,30, 80); 
line (30, 80,30,10); 


图 10-1 用 line () 绘制 矩形 
但 是 line () 绘制 的 图 形 是 不 封闭 的 图 形 。 即 使 起 点 与 终点 相同 ， 绘 制 的 图 形 也 只 有 轮廓 ， 没 有 填充 。 通 过 上 面 的 例子 可 以 看 到 ， 设 置 的 填充 颜色 并 没有 实现 。 
在 Processing 中 ， 可 以 使 用 beginShape () 、vertex () 、endShape () 函数 来 绘制 复杂 的 图 形 。 


使 用 方法 如 下 : 


在 beginShape () 和 endShape () 函数 之 间 使 用 vertex () 函数 指定 多 个 vertex 顶 点 ， 程 序 会 自动 把 这 些 vertex 顶 点 用 直线 连接 起 来 ， 并 且 会 对 这 些 直线 构成 的 图 形 进行 填充 。 


示例 : 使 用 vertex 顶 点 来 绘制 一 个 三 角形 ， 如 图 10-2 所 示 。 


beginShape () 7 
Vertex (50, 50) 7 
Vertex (25, 70) 7 
vertex(75,70); 
endShape (); 


为 什么 有 一 条 边 没有 描绘 出 来 ? 


要 在 endShape () 函数 里 传 入 CLOSE 常量 ， 使 得 开始 顶点 和 结束 顶点 自动 连接 形成 封闭 图 形 。 即 把 最 后 一 行程 序 改 为 endShape (CLOSE) ; 就 可 以 得 到 封闭 的 图 形 ， 如 图 10-3 所 示 。 


图 10-2 ”未 加 CLOSE 常量 


图 10-3 加 入 CLOSE 常量 


第 10 章 ”复杂 图 形 


10.1 绘制 多 边 形 


前 面 学 会 画 三 角形 、 正 方形 、 四 边 形 这 些 简 单 图 形 ， 那 么 如 何 画 多 边 形 呢 ? 用 很 多 条 直线 首尾 相连 起 来 是 最 容易 想到 的 办 法 。 下 面 的 示例 是 用 line () 函数 来 实现 矩形 的 绘制 ， 如 图 10-1 所 示 。 


示例 : 

10-1 
fil1 (#FF0000); // 填充 红色 
line(30,10, 80,10); // 画 直线 


line (80,10, 80, 80); 
line (80, 80, 30, 80); 
line (30, 80,30,10); 


图 10-1 用 line () 绘制 矩形 
但 是 line () 绘制 的 图 形 是 不 封闭 的 图 形 。 即 使 起 点 与 终点 相同 ， 绘 制 的 图 形 也 只 有 轮廓 ， 没 有 填充 。 通 过 上 面 的 例子 可 以 看 到 ， 设 置 的 填充 颜色 并 没有 实现 。 
在 Processing 中 ， 可 以 使 用 beginShape () 、vertex () 、endShape () 函数 来 绘制 复杂 的 图 形 。 


使 用 方法 如 下 : 


在 beginShape () 和 endShape () 函数 之 间 使 用 vertex () 函数 指定 多 个 vertex 顶 点 ， 程 序 会 自动 把 这 些 vertex 顶 点 用 直线 连接 起 来 ， 并 且 会 对 这 些 直线 构成 的 图 形 进行 填充 。 


示例 : 使 用 vertex 顶 点 来 绘制 一 个 三 角形 ， 如 图 10-2 所 示 。 


beginShape () 7 
Vertex (50, 50) 7 
Vertex (25, 70) 7 
vertex(75,70); 
endShape (); 


为 什么 有 一 条 边 没有 描绘 出 来 ? 


要 在 endShape () 函数 里 传 入 CLOSE 常量 ， 使 得 开始 顶点 和 结束 顶点 自动 连接 形成 封闭 图 形 。 即 把 最 后 一 行程 序 改 为 endShape (CLOSE) ; 就 可 以 得 到 封闭 的 图 形 ， 如 图 10-3 所 示 。 


图 10-2 ”未 加 CLOSE 常量 


图 10-3 加 入 CLOSE 常量 


10.2 绘制 模式 


设置 beginShape (kind) 函数 的 kind 类 型 ， 可 以 改变 绘制 模式 ， 表 10-1 列 出 了 所 有 绘制 模式 的 常量 。 注 意 这 些 参数 需 使 用 大 写字 母 ，Processing 是 大 小 写 敏 感 的 。 


表 10-1 绘制 模式 


常 量 作 作 用 


POINTS 绘制 三 角 扇形 
LINES 绘制 四 边 形 
TRIANGLES 绘制 四 边 形 带 


TRIANGLE STRIP 


POINTS 模 式 将 每 个 顶点 绘制 一 个 点 ， 如 图 10-4 所 示 。 


10-3 
beginShape (POINTS); 
vertex(50, 50); 
Vertex (25,70); 
Vertex (75,70); 
endShape (); 


LINES 模 式 连接 每 一 对 顶点 ， 如 图 10-5 所 示 。 


10-4 
beginShape (LINES); 
vertex (50, 50) 7 
Vertex (25,70); 
vertex(75,70); 


Vertex (100,50) 7 
endShape (); 


图 10-4 POINT 模式 下 绘制 点 


图 10-5 LINE 模 式 下 绘制 线 


TRIANGLES 模 式 连 接 每 组 中 的 3 个 顶点 构成 三 角形 ， 如 图 10-6 所 示 。 


beginShape (TRIANGLES); 
Vertex (20,25); 

vertex (40,25); 

vertex (20, 45); 
vertex (50, 30); 

vertex (30, 50); 

Vertex (50, 50); 
endShape () 7 


TRIANGLE_STRIP 模 式 用 来 绘制 三 角形 带 ， 在 TRIANGLES 模 式 中 所 有 的 vertex 顶 点 都 只 对 应 一 个 三 角形 ， 而 TRIANGLE_STRIP 会 重复 使 用 vertex 顶 点 ， 有 些 顶点 会 对 应 多 个 三 角形 ,， 贡 


10-6 

beginShape (TRIANGLE STRIP) 

vertex (20, 25); 

Vertex (40,25); 

Vertex (20, 45) 7 

Vertex (50, 30); 

Vertex (30, 50) 7 

Vertex (50, 50) 7 

endShape () 7 


图 10-6 TRIANGLES 模 式 


图 10-7 TRIANGLE_STRIP 模 式 


TRIANGLE_FAN 模 式 用 来 绘制 三 角 扇形 ， 如 图 10-8 所 示 。 


= 了 

beginShape (TRIANGLE, FAN); 

vertex (50, 50); 

vertex (20,20) 7 

Vertex (50,20) 7 

Vertex (80,20); 

Vertex (80, 50) 7 

vertex(80, 80); 

endShape (); 


QUADS 模 式 将 顶点 按 顺 序 4 个 分 为 一 组 ， 绘 制 独立 的 四 边 形 。 


QUAD STRIP 是 利用 4 个 连续 顶点 组 成 一 个 四 边 形 ， 在 绘制 过 程 重复 使 用 vertex 顶 点 ， 可 以 绘制 相连 的 四 边 形 。 


示例 : 绘制 一 个 正八 边 形 。 


绘图 思路 : 先 计算 正 多 边 形 的 中 心 角 ， 再 用 vertex () 函数 绘制 正 多 边 形 的 每 个 顶点。 顶点 的 位 置 可 以 用 三 角 函 数 


， 根 据 正 多 边 形 外 界 圆 半径 和 中 心 角 求 得 ， 如 


图 10-9 所 示 。 


图 10-8 TRIANGLE_FAN 模 式 


图 10-9 正八 边 形 


10-8 
void setup () 


polygon (50, 50, 30, 8); 
void polygon (float x,float y,float r,int n) 


// xX 为 中 心 点 Xx 坐标， 为 半径 ，n 为 边 数 

float radian=TWO PI/n; // 计算 正 多 边 形 的 中 心 角 
float xtemp,ytemp; 

beginShape () 7 

for (int i=0;i<n;i++) 


xtemp=x+cos (radian*i)*r; // 计算 顶点 的 x 坐标 
ytemp=y+sin (radian*i)*r; // 计算 顶点 的 y 坐 标 


Vertex (xtemp, ytemp); 


endShape (CLOSE); 
} 


注意 ” 当 边 数 为 30 时 ， 就 接近 圆 形 。 


利用 同样 的 思路 来 绘制 星 形 。 星 形 的 顶点 是 交替 分 布 在 两 个 不 同 半径 的 圆周 上 ， 可 以 利用 这 个 规律 来 绘制 ， 如 图 10-10 所 示 。 


void setup () 
start (50, 50, 30, 40, 6); 


i 
void start (float x,float y,float rl,float r2,int n) // n 表 示 角 数 
{ 
float radian=TWO PI/ (n*2); 
float xtemp,ytemp; 
beginShape (); 
for (int i=0;i<n*2;i++) // 项 角 的 数量 为 角 个 数 的 两 倍 


if (i%2==0) // 如 果 i 能 被 整除， 绘制 内 半径 顶点 
{ 


xtemp=x+cos (radian*i)*rl; 
ytemp=y+sin (radian*i)*rl; 


else 
{ 
xtemp=x+cos (radian*i)*r2; 
ytemp=yt+sin (radian*i)*r2; 
Vertex (xtemp, ytemp); 


} 
endShape (CLOSE); 
} 


如 果 想 要 得 到 一 个 圆 角 的 星 形 ， 应 该 怎么 做 ? 


把 自 定义 start () 函数 中 的 绘制 vertex 顶 点 的 vertex () 函数 换 成 curveVertex () 函数 ， 就 可 以 得 到 贺 角 的 星 形 。 


图 10-10 星 形 


10.3 环形 


vertex () 函数 还 可 以 用 于 绘制 环形 。 如 何 绘制 一 个 正 多 边 环形 呢 ? 


绘制 思路 : 绘制 正 多 边 形 用 的 是 三 角形 带 ， 为 了 绘制 项 点 的 时 候 能 按照 “之 ”字形 顺序 ， 每 次 循环 时 都 绘制 两 个 项 点 (外侧 项 点 和 内 侧 项 点 ) ， 这 样 就 形成 了 “之 ” 字 顺 序 ， 如 图 10-11 所 示 。 示 例 代 
码 如 下 : 


10-10 
void setup () 


size(100,100, P2D); 
noStroke () 7 
polygonRing (50, 50, 20, 30, 6); 


void polygonRing (float x,float y,float rl,float r2,int n ) 


{ // (xy) 是 中 心 坐 标 ，r1 是 内 半径 ，r2 是 外 半径 ，n 是 边 数 
float radian=TWO PI/n; 
float xtemp,ytemp; 
beginShape (TRIANGLE STRIP); 
for (float i=0;i<=n;i++) 


xtemp=x+Cos (radian*i)*r2; 
ytemp=y+sin (radian*i)*r2; 
vertex (xtemp, ytemp); // 绘制 外 侧 顶 点 ; 
xtemp=x+Cos (radian*i)*r1; 
ytemp=y+sin (radian*i)*rl; 
vertex (xtemp, ytemp); 
}// 绘制 内 测 顶点 
endShape (); 
} 


注意 ”数值 越 大 就 越 接近 国 环 ， 当 边 数 为 30 以 上 时 ， 接 近 圆 环 。 


10.4 图 形 差 集 


想 要 产生 差 集 效果 ， 可 以 在 beginShape () 和 endShape () 函数 之 间 使 用 beginContour () 和 endContour () 函数 。 当 两 个 
形 没 有 交集 时 ， 不 产生 任何 效果 。 


图 10-11 


正六 边 环 形 


图 形 之 间 有 重 赤 部 分 时 ， 重 赫 部 分 被 删除 ， 如 图 10-12 所 示 。 当 两 个 | 


图 


10-11 
size(100,100, P2D); 
beginShape (); 
vertex (50,20); 
Vertex (25, 60); 
vertex (70, 60); 
beginContour () 7 
Vertex (50, 60) 7 
Vertex (70,20) 7 
Vertex (90, 60) 7 
endContour () 7 
endShape (CLOSE) 7 


当 一 个 图 形 在 另 一 个 图 形 内 部 的 时 候 ， 外 部 的 图 形 被 内 部 图 形 铂 空 ， 如 图 10-13 所 示 。 


10-12 
size(100,100, P2D); 
beginShape (); 
vertex(50,20); 
vertex (25, 60); 
vertex(70, 60); 
vertex(90, 20); 
beginContour () 7 
Vertex (50, 50) 7 
Vertex (70,25) 7 
Vertex (50, 35) 7 
endContour () 7 
endShape (CLOSE) 


图 10-12 差 集 效果 


图 10-13 ” 钱 空 效果 


10.5 ”PShape 图 形 对 象 


PShape 类 把 图 形 封 装 成 了 一 个 类 ,使 用 CreateShape () 和 endShape () 成 员 函 数 为 Pshape 类 型 对 象 绘制 图 


形 。PShape 图 


形 对 象 只 有 在 P2D 或 者 P3D 泻 染 模式 下 才能 工作 。 


IO-13 
size(100,100, P2D); 


PShape shape=createShape () 7 
shape.beginShape () 7 
shape.vertex (50,20) 7 
shape.vertex (80,70) 7 
shape.vertex (20,70) 7 
shape.endqShape (CLOSE) 7 


为 什么 画布 上 什么 都 看 不 到 呢 ? 


因为 要 用 Shape () 函数 才能 使 PShape 对 象 绘制 到 画布 上 。 最 后 加 上 一 行 代码 “shape (shape) ; ”就 可 以 看 到 图 


形 了 。 


PSshape 类 提供 了 一 系列 的 成 员 函 数 ， 可 以 通过 成 员 函 数 来 对 Pshape 图 形 对 象 进行 各 种 操作 。 具 体 成 员 函 数 如 表 10-2 所 示 。 


表 10-2 ”PShape 类 的 成 员 函 数 


函 数 作 用 
为 PShape 对 象 创建 LINE、TRIANGLE、RECT、ELLIPSE、ARC、 SPHERE、BOX 


createShapeO 等 基本 几何 图 形 
shapeModeO 改变 Pshape 对 象 的 绘制 模式 ， 有 CENTER、CORNER、CORNERS 三 种 模式 
setVisibleO 隐藏 或 显示 Pshape 图 形 对 象 
isVisibleO 返回 Pshape 图 形 对 象 的 显示 状态 ， 显 示 返 回 tue， 隐 藏 返回 false 
shape.translate(30.30) 对 图 形 进 行 位 移 
shape.rotate(PL3) 对 图 形 进 行 旋转 
shape.scale(2) 对 图 形 进行 缩放 
resetMatrix() 重 置 图 形 对 象 的 所 有 变换 操作 
getVertexCount() 获取 图 形 对 象 中 的 顶点 数量 
getVertex() 返回 指定 索引 位 置顶 点 的 坐标 
setVertex() 设置 指定 索引 位 置顶 点 的 坐标 
createShapeO 创建 GROUP 类 型 的 Pshape 对 象 
addChild0 添加 子 图 形 对 象 进 GROUP 类 型 图 形 对 象 
getChildCount() 返回 GROUP 图 像 的 子 图 形 对 象 个 数 
getChild0 返回 GROUP 图 形 对 象 指 定 索 引 位 置 的 子 图 形 对 象 
loadShapeO 加 载 外 部 图 形 来 初始 化 Pshape 对 象 
示例 : 


10-14 
PShape gl,cl,rl,tl1; 
size (100,100, P2D); 
gl=createShape (GROUP); 
cl=createShape (ELLIPSE, 25, 25, 30, 30); 
rl=createShape (RECT, 45, 45, 30, 30); 
tl=createShape (TRIANGLE, 15, 25, 45, 45, 15, 45); 
gl.addchild (t1) 
gl.addchild(cl) 
gl.addchild(r1)7 
g1.rotate (PI/10); 
gl.translate (20,0); 
shape (g1); 


ba 


运行 结果 如 图 10-14 所 示 。 


图 10-14 ”整体 图 形变 换 


第 11 章 ”3D 图 形 


11.1 3D 举 标 系 


在 用 Processing 绘 制 3D 图 形 之 前 ， 需 要 先 选 择 用 哪个 泻 染 器 进行 绘制 。Processing 默 认 的 泻 染 器 只 能 绘制 2D 形 状 ， 绘制 3D 图 形 需要 把 size () 函数 里 的 第 三 个 参数 设置 为 P3D 演 染 异 式 。 


Js 
size(100,100, P3D); 


在 3D 模 式 下 ，translate () 和 scale () 函数 增加 了 在 z 轴 上 的 变换 ， 旋 转变 换 则 使 用 rotateX () 、rotateY () 、rotateZ () 3 个 函数 分 别 对 x 轴 、y 轴 、z 轴 进行 旋转 变换 ， 如 图 11-1 所 示 。 


图 11-1 


3D 坐 标 轴 变换 


size(100,100, 
stroke (255,0, 


Tig 
P3D); 
0); 


line (0, 50,100, 50); 


line(50,0,50, 


100); 


rectMode (RADIUS); 


translate (50, 


50,0) 7 


TotateY (HALF PI/2); // yy 轴 旋 转 45" 


stroke (0); 


rect (01,0,25,25); 


注意 rotateX () 和 rotateZ () 函数 的 变换 效果 一 样 。 


Processing 中 提供 了 box () 和 sphere () 两 个 绘制 基本 几何 体 的 函数 ， 它 们 分 别 用 来 绘制 立方 体 和 球体 。 


示例 : 绘制 立方 体 。 


JS 


size(100,100,P3D) 7 

translate (55, 60,0) 7 

TotateX (-HALF PI/4); // x 轴 旋转 -22.5? 
TotateY (HALF PI/4); // y 轴 旋转 22.5® 


box (40) 7 


运行 结果 如 图 


11-2 所 示 。 


通过 box () 函数 重 载 分 别 设 置 立 方 体 的 长 、 宽 、 高 ， 格 式 如 下 : 


图 11-2 ”绘制 立方 体 


box ( 宽 ， 高 ， 长 ) 7 


绘制 球体 只 需要 指定 球体 的 半径 即 可 。 


sphere (40) 7 // 设置 球体 的 半径 为 40 像 素 


设置 结果 如 图 11-3 所 示 。 


图 11-3 


通过 shpereDetail () 函数 可 以 设置 球体 的 分 段 数 ， 默 认为 30， 分 段 数 越 高 ， 球 体 的 精度 越 高 。 


绘制 球体 


i1=5 
size (100,100, P3D); 
translate (50, 50, 0); 
sphereDetail (10); // 设置 分 段 数 为 10 
Sphere (40) 7 
示例 : 画 一 个 旋转 的 立方 体 。 
11-6 


float a=HALF PI/4; 
void setup () 
{ 


size(100,100, P3D); 
frameRate (15); 
}// 程序 每 秒 刷新 15 次 画面 
void draw() 
{ 
translate (50, 50, 0); 


background (204); // 背景 设置 为 灰色 
TotateX (-HALF PI/2); 

rotateY (a); 

a+=HALF PI/4; 

box (40) 7 


运行 结果 如 图 11-4、 图 11-5 所 示 。 


图 11-4 ”旋转 立方 体 1 


图 11-5 ”旋转 立方 体 2 


还 可 以 利用 前 面 学 的 一 些 平面 图 形 来 组 合 出 3D 效 果 的 图 形 。 


Ti=7 
size(150,150, P2D); 
£ill (#FFF000) 7 
ellipse (50, 30, 40,10); 
ellipse (50, 50, 40,10); 
line (30, 30, 30,50); 
line (70, 30,70,50); 


运行 结果 如 图 11-6 所 示 。 


修改 上 面 的 圆柱 体 代码 ， 画 出 一 个 圆锥 。 


图 11-6 圆柱 


11-8 
size(150,150, P2D); 
£ill (#FFF000) 7 
ellipse (50, 50, 40,10); 
line (50, 30, 30, 50); 
line(50,30,70,50); 


运行 结果 如 图 11-7 所 示 。 


示例 : 绘制 一 个 色彩 变幻 的 立方 体 。 


图 11-7 ”圆锥 


void setup() { 
size(1280, 720, P3D); 


} 
void draw() { 
delay (100); 
ambientLight (255, 255, 255); 


le 


由 


pointLight (random(255), random(255), random(255), 


lights(); 
nostroke (); 


fil] (random(255), random(255), random(255)); 


translate (500, 500, 0); 
rotateX (-HALF PI/4); 
rotateY (HALF PI/3); 
box(100, 100, 100); 


设置 为 P3D 泻 娄 模 式 


500, 500, 0); 


// 随机 点 光源 颜色 ， 位 置 500,500) 
// 打开 光源 

// 图 形 不 描 边 

// 随机 填充 颜色 

// 将 坐标 原点 移动 到 (500,500) 处 
// 将 x 坐标 轴 逆 时 针 转 40。 

// 将 y 和 坐标 轴 顺 时 针 转 60” 


绘制 三 维 金子 ， 长 宽 高 都 为 100 像 素 


运行 结果 如 图 11-8 所 示 。 


图 11-8 色彩 变幻 的 立方 体 


第 11 章 ”3D 图 形 


11.1 3D 坐 标 系 


在 用 Processing 绘 制 3D 图 形 之 前 ， 需 要 先 选 择 用 哪个 泻 染 器 进行 绘制 。Processing 默 认 的 泻 染 器 只 能 绘制 2D 形 状 ， 绘 制 3D 图 形 需要 把 size () 函数 里 的 第 三 个 参数 设置 为 P3D 演 染 模 式 。 


size(100,100, P3D); 


在 3D 模 式 下 ，translate () 和 scale () 函数 增加 了 在 z 轴 上 的 变换 ， 旋 转变 换 则 使 用 rotateX () 、rotateY () 、rotateZ () 3 个 函数 分 别 对 x 轴 、y 轴 、z 轴 进行 旋转 变换 ， 如 图 11-1 所 示 。 


图 11-1 


3D 坐 标 轴 变换 


size(100,100, 
stroke (255,0, 


Tig 
P3D); 
0); 


line (0, 50,100, 50); 


line(50,0,50, 


100); 


rectMode (RADIUS); 


translate (50, 


50,0) 7 


TotateY (HALF PI/2); // yy 轴 旋 转 45" 


stroke (0); 


rect (01,0,25,25); 


注意 rotateX () 和 rotateZ () 函数 的 变换 效果 一 样 。 


Processing 中 提供 了 box () 和 sphere () 两 个 绘制 基本 几何 体 的 函数 ， 它 们 分 别 用 来 绘制 立方 体 和 球体 。 


示例 : 绘制 立方 体 。 


JS 


size(100,100,P3D) 7 

translate (55, 60,0) 7 

TotateX (-HALF PI/4); // x 轴 旋转 -22.5? 
TotateY (HALF PI/4); // y 轴 旋转 22.5® 


box (40) 7 


运行 结果 如 图 


11-2 所 示 。 


通过 box () 函数 重 载 分 别 设 置 立 方 体 的 长 、 宽 、 高 ， 格 式 如 下 : 


图 11-2 ”绘制 立方 体 


box ( 宽 ， 高 ， 长 ) 7 


绘制 球体 只 需要 指定 球体 的 半径 即 可 。 


sphere (40) 7 // 设置 球体 的 半径 为 40 像 素 


设置 结果 如 图 11-3 所 示 。 


图 11-3 


通过 shpereDetail () 函数 可 以 设置 球体 的 分 段 数 ， 默 认为 30， 分 段 数 越 高 ， 球 体 的 精度 越 高 。 


绘制 球体 


i1=5 
size (100,100, P3D); 
translate (50, 50, 0); 
sphereDetail (10); // 设置 分 段 数 为 10 
Sphere (40) 7 
示例 : 画 一 个 旋转 的 立方 体 。 
11-6 


float a=HALF PI/4; 
void setup () 
{ 


size(100,100, P3D); 
frameRate (15); 
}// 程序 每 秒 刷新 15 次 画面 
void draw() 
{ 
translate (50, 50, 0); 


background (204); // 背景 设置 为 灰色 
TotateX (-HALF PI/2); 

rotateY (a); 

a+=HALF PI/4; 

box (40) 7 


运行 结果 如 图 11-4、 图 11-5 所 示 。 


图 11-4 ”旋转 立方 体 1 


图 11-5 ”旋转 立方 体 2 


还 可 以 利用 前 面 学 的 一 些 平面 图 形 来 组 合 出 3D 效 果 的 图 形 。 


Ti=7 
size(150,150, P2D); 
£ill (#FFF000) 7 
ellipse (50, 30, 40,10); 
ellipse (50, 50, 40,10); 
line (30, 30, 30,50); 
line (70, 30,70,50); 


运行 结果 如 图 11-6 所 示 。 


修改 上 面 的 圆柱 体 代码 ， 画 出 一 个 圆锥 。 


图 11-6 圆柱 


11-8 
size(150,150, P2D); 
£ill (#FFF000) 7 
ellipse (50, 50, 40,10); 
line (50, 30, 30, 50); 
line(50,30,70,50); 


运行 结果 如 图 11-7 所 示 。 


示例 : 绘制 一 个 色彩 变幻 的 立方 体 。 


图 11-7 ”圆锥 


void setup() { 
size(1280, 720, P3D); 


} 
void draw() { 
delay (100); 
ambientLight (255, 255, 255); 


le 


由 


pointLight (random(255), random(255), random(255), 


lights(); 
nostroke (); 


fil] (random(255), random(255), random(255)); 


translate (500, 500, 0); 
rotateX (-HALF PI/4); 
rotateY (HALF PI/3); 
box(100, 100, 100); 


设置 为 P3D 泻 娄 模 式 


500, 500, 0); 


// 随机 点 光源 颜色 ， 位 置 500,500) 
// 打开 光源 

// 图 形 不 描 边 

// 随机 填充 颜色 

// 将 坐标 原点 移动 到 (500,500) 处 
// 将 x 坐标 轴 逆 时 针 转 40。 

// 将 y 和 坐标 轴 顺 时 针 转 60” 


绘制 三 维 金子 ， 长 宽 高 都 为 100 像 素 


运行 结果 如 图 11-8 所 示 。 


11.2 三维 灯光 


图 11-8 


之 前 绘制 的 立方 体 和 球体 都 有 描 边 和 填充 ， 若 把 立方 体 的 描 边 去 掉 ， 效 果 如 


图 


11-9 所 示 。 


色彩 变幻 的 立方 体 


图 11-9 ”立方 体 不 描 边 


可 见 ， 绘 制 出 来 的 白色 多 边 形 完全 没有 立体 感 ， 这 是 因为 立方 体 的 每 个 面 颜色 都 是 一 样 的 。 而 在 真实 自然 环境 中 ， 物 体 表面 由 于 光线 的 照射 ， 会 产生 不 同 的 明暗 变化 ， 通 过 这 种 明暗 变化 可 以 感觉 到 它 
在 空间 中 的 立体 结构 。 


默认 状态 下 灯光 是 关闭 的 ， 可 以 调用 lights () 函数 来 开启 默认 灯光 效果 。 


= 
lights(); // 开启 灯光 效果 
translate (50, 50, 0); 
noStroke () 7 
Sphere (40) 7 


运行 结果 如 图 11-10 所 示 。 


图 11-10 ”上 默认 灯光 效果 


在 一 个 场景 中 可 以 加 入 各 种 类 型 的 光 ， 有 环境 光 、 方 向 光 、 点 光源 、 聚 光 灯 。Processing 提 供 了 一 些 灯光 函数 ， 如 表 11-1 所 示 。 可 以 通过 创建 和 设置 它们 来 对 几何 体 进行 光照 计算 ， 从 而 使 几何 体 产生 
不 同 明暗 变化 的 视觉 效果 。 


表 11-1 灯光 函数 
函 数 作 用 
ambientLight() 创建 环境 光 
pointLight() 创建 点 光源 
directionalLight() 创建 方向 光 
spotlight() 创建 聚光灯 
lightFalloffO 设置 灯光 的 衰减 方式 
对 三 维 空间 中 的 物体 来 说 ， 环 境 光 ambientLight 完 全 没有 方向 ， 它 的 位 置 只 会 影响 它们 的 衰减 程度 ， 如 图 11-11 所 示 。 
ambientLight (vl, v2,v3); // 红色 分 量 ，V2 绿 色 分 量 ，V3 蓝 色 分 量 
示例 : 


size(100,100,P3D); 
ambientLight (255, 0,0); 


translate (50, 50, 0); // 沿 着 (50, 50,0) 向 量 移动 
rotateX (PI/4); // x 轴 旋转 45" 
nostroke (); 

box (40) 7 


图 11-11 看 不 出 是 立方 体 ， 我 们 可 以 给 图 形 加 个 描 边 ， 如 图 11-12 所 示 。 


图 11-11 环境 光 


图 11-12 ”环境 光 加 描 边 


点 光源 是 光线 从 某 一 点 向 四 面 八方 发 射 的 一 种 灯光 ， 它 对 每 个 方向 的 照明 程度 相同 ， 如 图 11-13 所 示 。 


方向 光 是 模拟 光 从 某 方 向 发 射出 来 的 平行 光 ， 它 是 唯一 一 种 没有 具体 位 置 的 光照 ， 如 图 11-14 所 示 。 


图 11-13 ”点 光源 


图 11-14 ”方向 光 


聚光灯 是 一 种 锥 形 光 ， 类 似 舞 台 追 光 灯 。 它 具有 最 多 参数 ， 包 括 位 置 、 方 向 、 角 度 、 集 中 度 、 豪 减 ， 如 图 


注意 ”可 以 同时 使 用 多 个 灯光 ,但 是 灯光 总 数量 必须 小 于 等 于 8， 否 则 程序 会 出 错 。 


临时 关闭 灯光 效果 ， 可 使 用 noLights () 函数 ， 但 必须 在 绘制 图 形 前 调用 。 


11-15 和 图 


11-16 所 示 。 


图 11-15 “聚光灯 1 


图 11-16 ”聚光灯 2 


示例 : 立方 体 不 动 ， 灯 光 转 动 ， 光 影 会 相应 变化 ， 如 图 11-17、 图 11-18 所 示 。 


es 
int a=0; 
void setup () 


size (100, 100, P3D); 
frameRate (5) 7 // 更 新 画面 每 秒 5 帧 


} 

void draw() 

L 
background (204); 
spotLight (255, 255, 255,a,a,a,0,0,-1,HALF PI/2,1); 
translate (50, 50, 0); 
rotateX (-HALF PI/4); 
rotateY (HALF PI/4); 
nostroke (); 
box (40); 
a+=57 


图 11-17 灯光 转动 1 


图 11-18 ”灯光 转动 2 


11.3 “三 维 透视 


在 绘画 中 ， 利 用 物体 的 透视 变化 可 产生 距离 感 ， 这 种 “ 近 大 远 小 ”的 透视 现象 能 够 表现 物体 的 立体 感 。Processing 默 认 采 用 这 种 透视 投影 方式 在 二 维 平面 上 提供 三 维 的 效果 。 


四 


是 


， 如 


， 通 过 近 平 面 上 、 下 、 左 、 右 边界 值 ， 以 及 近 、 远 平面 离 视 点 的 距离 来 调节 可 视 范 11-19 所 示 。 


对 


frustum () 函数 设置 透视 投影 的 可 视 范围 


回 


已 


frustum(left, right, bottom, top, near, far); 
/*left: 左边 界 ，right: 右边 界 ，bottom: 下 边界 ，top: 上 边界 ，near: 近 处 边界 ，far: 远 处 边界 */ 


示例 : 


11=13 
size(100,100,P3D); 
noFill (); 
frustum(-10, 20, 20, -10,10,200); 
translate (50, 50); 
rotateY (PI/4); 
box(50); 


11-20 所 示 。 


perpective () 函数 设置 投影 的 可 视 范 围 ， 如 


区 


Perpective (fovy,aspect, zNear, zFar) 
// fovy: 角度 ，aspect: 宽 高 比例 ，zNear: 近 处 边界 ，zFEar: 远 处 边界 


图 11-19 ”透视 投影 范围 


图 11-20 “投影 可 


示例 : 


size(100, 100, P3D); 

noFill(); 

float fovy=PI/2.0; 

float aspect=float (width) /height; 
float camera2Z=height/2/tan (fovy/2); 
float zNear=cameraZ/10; 

float zFar=cameraZ*10; 

perspective (fovy, aspect, zNear, zFar); 
translate (50, 50); 

rotate (PI/4); 

box (45) 7 


ortho () 函数 设置 平行 投影 ， 它 的 参数 和 frustum () 函数 相同 ， 如 图 11-21 所 示 。 


示例 : 


size(100,100, P3D); 

norFill(); 

ortho (0, width, 0, height, 100, -200); 
translate (50, 50); 

rotateX (PI/6); 

rotateY (PI/6); 

box (50) 7 


camera () 函数 创建 相机 来 设置 观察 点 的 位 置 和 角度 ， 如 图 11-22 所 示 。 


Camera (eyeX, eyeY, eyeZ,centerX, centerY， center2, UPX,uUPY, UPp2Z) 
/*eyeX，eyeY，eyeZ: 相机 的 坐标 

CenterX，CenterY， center2Z: 目标 的 坐标 

upX, upY, upZ: 方向 的 分 量 */ 


示例 : 


11-16 
size(100, 100, P3D); 
noFil1()7 
float cameraZz=height/2/tan (PI*30/180); 
camera (width/2, height/2, cameraZz, width/2, height/2, 0, 0, 1, 1); 
translate (50, 50); 
FotateX (PI/4); 
rotateY (PI/4); 
box (40); 


图 11-21 平行 投影 


图 11-22 ”观察 点 的 位 置 和 角度 


第 12 章 位 图 


12.1 加载 位 图 


Processing 支 持 的 位 图 格式 有 jpg、png、gif#0tga。 
在 加 载 位 图 前 ， 首 先 要 把 图 片 放 到 程序 目录 下 的 data 文 件 夹 里 ， 如 果 没有 data 文 件 夹 就 新 建 一 个 data 文 件 夹 。 


loadImage (filename) 
filename 是 要 加 载 的 图 片 名 


示例 : 


PImage img; 

// 创建 一 个 PImage 类 的 实例 
img=loadImage ("image.jpg"); 
// 位 图 名 为 image.jpg 


在 使 用 loadImage () 函数 加 载 图 片 的 过 程 中 ， 程 序 是 不 能 往 下 运行 的 。 如 果 想 要 在 加 载 位 图 的 过 程 中 继续 往 下 执行 程序 ， 就 需要 用 requestlmage () 函数 来 代替 loadlmage () 函数 。 


requestlmage () 在 加 载 位 图 时 会 单独 新 建 一 条 线程 ， 因 此 不 会 影响 后 面 程序 的 运行 。 读 者 可 以 通过 访问 Plmage 中 的 width 属性 来 判断 位 图 加 载 状态 ， 如 表 12-1 所 示 。 


表 12-1 width 属性 检测 位 图 加 载 状态 


width 属性 位 图 加 载 状态 
0 位 图 加 载 中 


= 位 图 加 载 失 败 
位 图 实际 的 宽 位 图 已 经 加 载 完成 
示例 : 
12-1 
PImage img; // 创建 对 象 img 
void setup(){ 
img = requestImage ("imagel .jpg"); // 读 取 图 片 jmagel .jpg 


} 
void draw(){ 

println (img.width); 
} 


输出 结果 如 图 12-1 所 示 。 


司 12-1 ”加 载 位 图 并 显示 位 图 宽度 


第 12 章 位 图 


12.1 “加载 位 图 


Processing 支 持 的 位 图 格式 有 jpg、png、gif 和 tga。 


Dm 


在 加 载 位 图 前 ， 首 先 要 把 图 片 放 到 程序 目录 下 的 data 文 件 夹 里 ， 如 果 没 有 data 文 件 夹 就 新 建 一 个 data 文 件 夹 。 


@ 


loadImage (filename) 
filename 是 要 加 载 的 图 片 名 


示例 : 


PImage img; 

// 创建 一 个 PImage 类 的 实例 
img=loadImage ("image.jpg"); 
// 位 图 名 为 image.jpg 


在 使 用 loadlmage () 函数 加 载 图 片 的 过 程 中 ， 程 序 是 不 能 往 下 运行 的 。 如 果 想 要 在 加 载 位 图 的 过 程 中 继续 往 下 执行 程序 ， 就 需要 用 requestlmage () 函数 来 代 蔡 loadlmage () 函数 。 


时 会 单独 新 建 一 条 线程 ， 因 此 不 会 影响 后 面 程序 的 运行 。 读 者 可 以 通过 访问 Plmage 中 的 width 属性 来 判断 位 图 加 载 状态 ， 如 表 12-1 所 示 。 


requestlmage () 在 加 载 位 


表 12-1 width 属性 检测 位 图 加 载 状态 


width 属性 位 图 加 载 状态 
0 位 图 加 载 中 
= 位 图 加 载 失败 


位 图 实际 的 宽 位 图 已 经 加 载 完 成 
示例 : 
12-1 
PImage img; // 创建 对 象 img 


void setup(){ 
img = requestImage ("imagel .jpg"); // 读 取 图 片 imagel .jpg 
} 
void draw(){ 
println (img.width); 
} 


输出 结果 如 图 12-1 所 示 。 


司 12-1 ”加 载 位 图 并 显示 位 图 宽度 


12.2 显示 位 图 


成 功 加 载 位 图 后 ， 就 可 以 使 用 image () 函数 来 显示 位 图 。image () 


需要 传 入 5 个 参数 。 


image (imageName, posX, posY,width, height); 
imageName: 位 图 示例 

PosX: 位 图 左上 角 x 坐标 

posY: 位 图 左上 角 y 坐 标 

width: 位 图 显示 的 宽度 

height: 位 图 显示 的 高 度 


如 果 不 设置 位 图 显示 的 宽 与 高 ，Processing 会 显示 为 默认 的 宽 与 高 。 如 果 设 置 的 宽 高 比 跟 原 位 图 的 宽 高 比 不 一 样 ，Processing 将 会 对 位 图 进行 挤 压 或 拉 伸 。 


示例 : 将 位 图 显示 为 默认 的 宽 与 高 。 


12-2 
PImage img; // 创建 对 象 img 
void setup () 


size(640,480) 7 
img = requestImage ("imagel.jpg");  // 读 取 图 片 jmagel .jpg 
} 


void draw() 


image (img, 0,0); 


示 结 果 如 图 12-2 所 示 。 


12.3 ”颜色 通道 


位 图 


每 个 像素 点 都 是 由 3 个 颜色 组 成 的 ， 分 别 为 红 、 绿 、 蓝 ， 对 应 RGB 三 通道 。 如 果 想 让 位 图 


图 12-2 显示 为 默认 宽 与 高 


只 显示 某 一 通道 或 者 改变 某 通道 的 比例 ， 就 要 用 到 tint () 函数 。 


tint (R,G, B) 
R: 红色 通道 比例 ， 范 围 为 0~255 
色 通 道 比例 ， 范 围 为 0~255 
色 通 道 比例 ， 范 围 为 0~255 


示例 : 只 显示 位 图 的 红色 和 蓝 色 通 道 ， 如 图 12-3 所 示 。 


12-3 
PImage img; // 创建 对 象 img 
void setup () 


size (640,480); 


img = requestImage ("imagel .jpg"); // 读 取 图 片 imagel .jpg 


} 
void draw() 
{ 


tint (255,0,255); 
image (img, 0,0); 


// 只 显示 红色 和 蓝 色 通道 


图 12-3 只 显示 红色 和 蓝 色 通 道 


每 加 载 一 张 位 图 都 会 实例 化 一 个 plmage 对 象 ，Plmage 对 象 里 面 有 很 多 操作 像素 的 相关 函数 ， 如 表 12-2 所 示 。 


表 12-2 PlImage 成 员 兄 数 及 其 作用 


区 数 作 用 
resize() 重新 设置 位 图 尺寸 
get() 获取 位 图 某 一 像素 点 的 颜色 值 
set() 设置 位 图 某 一 像素 点 的 颜色 值 
copy() 复制 位 图 指定 区 域 像素 
createImage() 创建 位 图 
save() 保存 位 图 到 指定 路 径 
在 使 用 resize () 函数 时 ， 要 传 入 两 个 参数 ， 对 应 修改 后 位 图 的 宽 和 高 。 当 传 入 的 宽 和 高 与 原 位 图 的 宽 和 高 比例 不 一 样 的 时 候 ，Processing 将 会 对 位 图 进行 挤 压 或 拉 伸 。 
ch 性 图 兴修 富民 守 
height: 位 图 修改 后 的 高 
示例 : 将 原 位 图 的 宽 和 高 640x480 修 改 为 400x150， 如 图 12-4 所 示 。 


PImage img; 
size(500,300); 


img=loadImage ("imagel .了 


img.resize (400,150); 
image (img, 0,0); 


12-4 


g"); 
// 将 位 图 宽 和 高 重新 设置 为 400x150 


使 用 get () 成 员 函 数 来 获取 位 图 


图 12-4 ”修改 位 图 宽 高 比例 


中 某 一 点 像素 的 颜色 。get () 函数 有 两 种 重 载 方法 ， 一 种 是 返回 位 图 


中 某 一 点 像素 的 颜色 ， 另 一 种 是 返回 位 图 


中 某 个 矩形 区 域 的 像素 颜色 值 。 


get (x, y) 

get (x, y, width, height) 
xX: 位 图 像素 点 x 坐标 

y: 像素 点 Y 坐 标 
width: 返回 矩形 的 宽 
height: 返回 矩形 的 高 


get (x，y) 的 范围 是 一 个 color 属 性 的 值 。 


get (x，y，width，height) 返回 的 是 一 个 PlImage 对 象 。 


示例 : 以 位 图 某 一 点 像素 的 颜色 值 画 一 个 矩形 ， 如 图 12-5 所 示 。 


PImage img; 

size(640, 480); 

img=loadImage ("imagel .jpg"); 
image (img, 0, 0); 

color a=img.get (300,200); 
£fill (a); 

rect (0, 0,200,200); 


12=5 


// 获取 坐标 (300,200) 像素 点 的 颜色 值 
// 填充 颜色 
// 务 矩 形 


图 12-5 ”获取 位 图 中 某 一 像素 点 的 颜色 


示例 : 创建 另 一 位 图 对 象 ， 显 示 内 容 为 原 位 图 的 某 个 矩形 区 域 ， 如 图 12-6 所 示 。 


PImage img; 

size(640,480); 

img=loadImage ("imagel .jpg"); 
image (img, 0,0); 


12-6 


PImage img2=img.get (300,200,200,200); 


image (img2,0,0); 


在 Processing 中 ， 如 果 想 要 修改 位 


图 某 一 像素 点 的 颜色 ， 要 用 到 set () 函数 。set () 函数 需要 传 入 3 个 参数 。 


Set (x, y, color) 
x: 像素 点 x 坐标 


际 
改 的 颜色 值 


图 12-6 ”获取 位 图 中 某 一 矩形 区 域 


示例 : 随机 修改 位 图 里 面 400 个 像素 点 ， 并 设置 为 随机 颜色 ， 如 图 12-7 所 示 。 


12-7 
Size(640,480) 7 // 窗口 设置 为 640x480 
PImage img = loadImage ("imagel.jpg"); // 读 取 图 片 imagel .jpg 


for (int i=0;i<400;i++) 
{ 


color c = color (random(255) ,random(255), random(255)); // 设置 随 
img.set ((int)random(640), (int) random(480),c); // 将 随机 ， 
} 
image (img, 0,0); 


图 12-7 ”修改 位 图 像素 点 颜色 


在 Processing 中 ， 想 要 复制 位 图 中 某 个 区 域 时 ， 可 以 用 copy () 函数 。copy () 函数 有 两 种 重 载 方法 ， 一 种 是 将 自身 的 某 个 区 域 复制 到 自身 ， 另 一 种 是 将 另 一 张 位 图 的 某 个 区 域 复制 到 这 张 位 图 的 指定 
区 域 。 


Copy (cx, cy, cw, ch, tx, ty, tw, th) 
Copy (img, cx, Cy, cw, ch tx, ty, tw, th) 
Cx: 要 复制 区 域 左上 角 xX 坐 标 

Cy: 要 复制 区 域 丰 上 角 yY 坐 标 

CW: 要 复制 区 域 的 宽 

ch: 要 复制 区 域 的 高 

tx: 目标 区 域 左上 角 x 坐 标 
ty: 目标 区 域 左 上 角 y 坐 标 
tw: 目标 
th: 目标 


示例 : 复制 位 图 自身 的 区 域 到 指定 位 置 ， 如 图 12-8 所 示 。 


12-8 
size(640,480); 
PImage img = loadImage ("imagel .jpg"); 
img.copy (300, 50, 300, 300, 0,0,300, 300); 
image (img, 0,0); 


示例 : 复制 另 一 张 位 图 指定 区 域 到 位 图 本 身 指定 区 域 ， 如 图 


12-9 所 示 。 


图 12-8 复制 位 图 自身 的 区 域 到 指定 位 置 


12=9 
size(640,480); 
PImage img = loadImage ("imagel.jpg"); 
PImage img2=loadImage ("image2.jpg"); 
img. copy (img2, 300, 50, 300, 300, 0, 0, 300, 300) ; 
// 从 位 图 img2 复 制 指定 区 域 到 位 图 jmg 
image (img, 0,0); 


createlmage () 函数 用 于 创建 位 图 。 


12-9 复制 另 一 张 位 


图 


指定 区 域 到 位 


本 身 指定 区 域 


height: 图 
ColorFormat: 位 
示例 : 创建 一 个 位 图 ， 如 图 12-10 所 示 。 


lal 
size(300,300); 


PImage img=createImage (200,200,RGB); 
image (img, 0,0); 


图 12-10 ”创建 位 图 


出 


创建 位 图 之 后 需要 保存 位 图 。 保 存 位 图 用 save () 函数 ， 默 认 的 保存 路 径 为 程序 的 根 目录 。 保 存 的 位 图 需要 加 上 后 缀 名 ，Processing 支 持 保存 为 TIFF、JPEG、PNG 等 格式 。 


save (filename) 
filename: 位 图 名 


示例 : 


12=11 
size(300,300); 
PImage img=createImage (200,200,RGB); 
image (img, 0,0); 
img.save ("demo.jpg"); // 保存 位 图 


12.5 渡 镜 


滤 镜 ， 可 以 使 位 图 产生 各 种 特殊 效果 。Processing 中 自 带 了 7 种 滤 镜 。 通 过 滤 镜 ， 可 以 对 位 图 进行 简单 的 图 像 处 理 ， 例 如 对 位 图 进行 二 值 化 处 理 等 。 


nD 
区 


使 用 Processing 自 带 的 滤 镜 ， 到 img.filter () 函数 。imgfilter () 需要 传 入 一 个 代表 滤 镜 名 字 的 参数 ， 有 的 滤 镜 还 需要 额外 设置 参数 ， 如 表 12-3 所 示 。 


表 12-3 imgfilter () 参数 


滤 镜 参数 
THRESHOLD 
POSTERIZE 
BLUR 

GRAY 
INVERT 
ERODE 
DILATE 


1. 二 值 化 


图 像 的 二 值 化 是 将 图 像 上 的 像素 点 的 灰 度 值 设 置 为 0 或 255， 也 就 是 将 整个 图 


在 Processing 中 对 图 像 进行 二 值 化 使 用 HRESHOLD 参 数 。 


作 用 


将 图 像 二 值 化 ， 需 要 设置 参数 
色调 分 离 ， 需 要 设置 参数 


模糊 ， 需 要 设置 参数 

将 图 像 转 化 为 灰 度 图 ， 不 设置 参数 
反 相 ， 不 设置 参数 

膨胀 ， 减 少 亮 部 区 域 ， 不 设置 参数 
腐蚀 ， 增 加 亮 部 区 域 ， 不 设置 参数 


像 呈 现 出 明显 的 只 有 黑 和 白 的 视觉 效果 。 通 过 二 值 化 ， 可 以 获得 图 像 内 容 大 体 的 轮廓 。 


img.filter (THRESHOLD, value) 
value: 图 像 二 值 化 转化 的 阅 值 ， 范 围 为 0~1， 默 认为 0.5 


示例 : 


当 图 像 某 像素 点 的 灰 度 高 于 立 值 时 ， 转 化 为 白色 ， 低 于 立 值 时 转化 为 黑色 。 


立 值 越 低 ， 图 像 白 


12~12 
size(1280, 480); 
PImage img=loadImage ("imagel .jpg") 
img.filter (THRESHOLD, 0.4); 
image (img, 0,0); 


]/ 二 值 化 处 理 ， 阅 值 为 0.4 


效果 对 比如 图 12-11、 图 12-12 所 示 。 


图 12-11 原 图 


图 12-12 图像 二 值 化 


2. 色 调 分 离 
因为 系统 或 档案 格式 对 渐变 色 阶 的 支持 不 够 而 构成 ， 也 


可 通过 相片 编辑 程序 而 达到 相同 效果 。 


色调 分 离 是 指 一 幅 图 像 原 本 是 由 紧 紧 相 邻 的 渐变 色 阶 构成 ， 被 数 种 突然 的 颜色 转变 所 代 蔡 。 这 一 种 突然 的 转变 ， 亦 称 作 “ 跳 阶 ”。 色 调 分 离 可 以 


色调 分 离 滤 镜 限制 每 种 颜色 通道 的 颜色 数量 ， 范 围 为 0~255。 数 值 越 低 效果 越 明显 。 


示例 : 


12-13 
size (1280, 480); 
PImage img=loadImage ("imagel .jpg"); 
img.filter (POSTERIZE, 3); // 色调 分 离 处 理 ， 参 数 为 0.3 
image (img, 0,0); 


效果 对 比如 图 12-13、 图 12-14 所 示 。 


图 12-14 色调 分 离 


3. 腐 蚀 和 膨胀 
腐蚀 可 以 减少 图 片 的 亮 部 区 域 ， 膨 胀 可 以 增加 图 片 的 亮 部 区 域 。 图 像 通 过 腐蚀 和 膨胀 的 处 理 ， 让 物体 的 轮廓 更 为 明显 。 
示例 : 腐蚀 。 
12-14 
size(1280, 480); 
PImage img=loadImage ("imagel .jpg"); 
img.filter (ERODE); // 腐蚀 处 理 
image (img, 0,0); 
效果 对 比如 图 12-15、 图 12-16 所 示 。 
示例 : 膨胀 。 
12=15 


size(1280, 480); 


PImage img=loadImage(" 


img.filter (DILATE); 
image (img, 0,0); 


imagel .jpg"); 
// 膨胀 处 理 


效果 对 比如 图 12-17、 图 


12-18 所 示 。 


图 12-16 ”腐蚀 


图 12-18 ”膨胀 


4. 反 相 


色 轮 上 相距 180 度 的 颜色 互 为 补 色 ， 也 叫 补 色 ， 意 即 在 色 轮 上 的 每 个 颜色 ， 在 它 的 对 面 都 有 一 个 跟 它 成 互补 关系 的 颜色 ， 它 们 的 连接 线 穿 过 色 轮 圆心 。 


反 相 即将 某 个 颜色 换 成 它 的 补 色 ， 一 幅 图 像 上 有 很 多 颜色 ， 若 每 个 颜色 都 转 成 各 自 的 补 色 ， 相 当 于 将 这 幅 图 像 的 色相 旋转 了 180 度 ， 原 来 黑 的 变 白 ， 原 来 绿 的 变 红 。 


在 计算 机 中 ， 当 以 RGB 模式 表示 颜色 时 ， 反 相 的 实现 是 用 255 (前 提 是 R、G、B 都 是 8 位 的 ) 分 别 减 去 R、G、B 的 值 ， 得 到 的 即 为 反 相 对 应 的 RGB 值 。 
反 相 滤 镜 用 到 的 是 INVERT 参 数 ， 它 不 需要 额外 设置 参数 。 


示例 : 


12-16 
size(1280, 480); 
PImage img=loadImage ("imagel .jpg"); 
img.filter (INVERT); // 反 相 处 理 
image (img, 0,0); 


效果 对 比如 图 12-19、 图 12-20 所 示 。 


Processing 中 ， 对 图 像 进行 模糊 处 理 运用 的 是 高 斯 模糊 滤 镜 。 通 过 使 


图 12-20 反 相 


区 


像 的 细节 层次 。 


模糊 滤 镜 可 以 减少 图 像 的 噪声 ， 以 及 降低 


模糊 滤 镜 使 用 的 是 BLUR 人 参数 。 它 需要 额外 设置 一 个 参数 ， 默 认为 1， 数 值 越 大 ， 模 糊 效果 越 明显 。 


示例 : 


size (1280, 480); 

PImage img=loadImage ("imagel .jpg"); 
img.filter (BLUR, 5); // 模糊 处 理 
image (img, 0,0); 


效果 对 比如 图 12-21、 图 12-22 所 示 。 


12-17 


网 


于 像 的 像素 值 大 大 减少 ， 


此 在 后 续 的 图 像 处 理 中 可 以 提高 处 理 的 效率 。 


灰 度 图 只 有 单 通 道 ， 当 图 像 转化 为 灰 度 


图 12-22 ”模糊 


对 图 像 进行 灰 度 处 理 用 的 是 GRAY 参数 ， 它 不 需要 额外 设置 参数 。 


示例 : 


12-18 
size(1280, 480); 
PImage img=loadImage ("imagel .jpg"); 
img.filter (GRAY); // 对 图 像 进行 灰 度 处 理 
image (img, 0,0); 


效果 对 比如 图 12-23、 图 12-24 所 示 。 


图 12-23 原 图 


图 12-24 灰 度 图 


12.6 ”纹理 贴图 


在 计算 机 中 ， 将 纹理 位 图 贴 到 几何 体 表面 以 达到 模拟 纹理 的 效果 。texture () 函数 设置 纹理 ， 而 vertex () 函数 涉及 纹理 的 具体 应 用 。texture () 函数 只 能 在 P2D 和 P3D 泻 染 模 式 下 使 用 ， 并 且 
texture () 函数 必须 在 beginShape () 和 endShape () 函数 之 间 使 用 。 


texture (image) 
image: 位 图 对 象 ，PImage 类 型 


在 使 用 贴图 的 时 候 ， 具 有 4 个 参数 的 vertex () 函数 使 用 前 两 个 参数 来 定义 顶点 坐标 ， 而 后 两 个 参数 则 用 来 定义 贴图 的 映射 坐标 。 


vertex (x1, yl,ul,v1) 

S 
al: ， 贴 图 映射 的 坐标 
V1: 垂直 方向 ， 贴 图 映射 的 坐标 


贴图 映射 坐标 可 以 小 于 贴图 的 宽度 和 高 度 ， 实 际 映 射 时 会 根据 映射 坐标 截取 贴图 ， 如 图 12-25 所 示 。 


图 12-25 贴图 


贴图 映射 坐标 也 可 以 大 于 贴图 的 宽度 和 高 度 ， 空 出 的 部 分 会 复制 边缘 的 像素 。 


12=-15 
size(200,200, P3D); 
DoStroke () 7 
translate (50, 50,0); 
PImage imgl=loadImage ("image.jpg"); 
beginShape () 7 
texture (img1) 7 
vertex(0,0,0,0); 
Vertex (0, 50,0,40); 
vertex (50, 50, 40, 40); 
vertex(50, 0,40,0); 
endShape () 7 


textureMode () 函数 可 以 改变 贴图 的 映射 坐标 的 模式 ， 支 持 IMAGE 和 NORMAL 两 种 模式 。1IMAGF 为 默认 模式 ， 根 据 贴 图 的 大 小 来 设置 。NORMAI 为 比例 模式 ， 水 平方 向 宽 为 1， 垂 直方 向 高 为 1， 


用 比例 来 设置 映射 坐标 。 
示例 : 


12=20 
Size(100,100,P3D) 7 
noStroke (); 
translate (50, 50,0); 
PImage imgl=loadImage ("image.jpg"); 
textureMode (NORMAL); 
beginShape () 7 
texture (jimg1) 7 
Vertex (10, 0,0,0) 
vertex(0,40,0.5, 
vertex(40, 40,0.5, 
vertex(40,0,0,0.5 
endShape (); 


3 
0.5); 
| 


结果 如 图 12-26 所 示 。 


图 12-26” NORMAL 模式 


利用 textureWrap () 函数 设置 贴图 空 出 部 分 的 处 理 方式 。 支 持 CLAMP 和 REPEAT 模 式 ，CLAMP 为 默认 模式 ，REPEAT 模 式 会 像 铺 地 板 砖 一 样 映射 到 几何 图 像 表 面 。 


示例 : 


12-21 
size(400, 400, P3D); 
nostroke (); 
PImage img =loadImage ("image.jpg"); 
textureWrap (REPEAT); 
beginShape () 7 
texture (img); 
vertex (40, 40,0,0); 
vertex (320, 80,1000,0); 
vertex(360,360,1000,1000); 
vertex (120, 240,0,1000); 
endShape () 7 


结果 如 图 12-27 所 示 。 


图 12-27 REPEAT 模 式 


第 13 章 文本 


想 用 Processing 显 示 文 字 的 时 候 ， 需 要 用 到 与 文本 相关 的 函数 。 


13.1 文本 相关 函数 


Processing 中 与 文本 相关 的 函数 如 表 13-1 所 示 。 


表 13-1 文本 函数 


天 
text() 
fill0 


数 


textSize() 


textA 


lign() 


textLeading() 
textWidth() 


textA 
textD 


13.2 ”显示 文本 


scent() 


scent() 


println () 函数 可 以 把 文本 内 容 显示 在 控制 台中 ， 但 如 果 想 要 在 运行 窗口 显示 文本 ， 需 要 


text () 函数 有 多 种 重 载 形式 。 


到 text () 函数 。 


作 用 
显示 文本 
文本 填充 的 颜色 
设置 字体 大 小 
文本 对 齐 方式 
入 性 字体 行 高 
返回 文本 的 像素 宽度 
返回 字体 上 伸 线 到 基线 的 距离 
返回 下 伸 线 到 基线 的 距离 


text (c, x, y) 

text (c, x, y, 2z) 

text (str, x, y) 

text (chars, start, stop, x, y) 
text (str, x, y, 2) 

text (chars, start, stop, x, y, 2z) 
text (str, xl, yl, x2, Yy2) 

text (num, x, y) 

text (num, x, y, 2z) 

C: 要 显示 的 文本 内 容 

X: 文本 显示 的 X 坐 
Y: 文本 显示 的 Y 坐 标 

zZ: 在 P3D 模 式 下 文本 显示 的 z 坐 标 
chars: 一 个 字符 数组 


start: 一 个 字符 数组 从 要 开始 显示 的 第 一 个 字符 的 索引 编号 


stop: 一 个 字符 数组 从 要 结束 显示 的 第 一 个 字符 的 索 


型 变量 
在 一 个 矩形 方 框 内 ， 算 形 左 上 角 的 x 


X2: 把 文本 显示 在 一 个 短 形 方 框 内 ， 奏 形 右 下 角 的 xX 


y1: 把 文本 显示 在 一 个 矩形 方 框 内 ， 撼 形 左上 角 的 y 坐 标 


引 编号 


攻 标 ， 


y2: 把 文本 显示 在 一 个 矩形 方 框 内 ， 和 天 形 右 下 角 的 Y 坐 标 
示例 : 

LT3-1 
size (200,200); 
char[] c={'a','b','c','d','e'}; // 定义 一 个 字符 数组 
int numInt=6; // 定义 一 个 整 型 变量 
float numFloat=8.4; // 定义 一 个 浮 点 型 变量 
String s="Hello,world"; // 定义 一 个 字符 囊 
£1i11 (0)? // 填充 颜色 为 黑色 
text ("example", 20, 20); // 显示 一 个 文本 
text (cv 0, 4,20, 40); // 显示 一 个 字符 数组 ， 索 引 为 0~4 
text (s, 20, 60) // 显示 一 个 字符 囊 
text (numInt, 20, 80); // 显示 整 型 变量 
text (numFloat, 20, 100); // 显示 浮 点 型 变量 


运行 结果 如 图 13-1 所 示 。 


当 显 示 的 内 容 是 字符 串 的 时 候 要 对 字符 串 加 双 引 号 ， 如 果 显 示 的 内 容 为 整 型 或 浮 点 型 等 数字 时 ， 则 不 用 加 双 引 号 。 


人 fil () 函数 用 于 设置 文本 填充 颜色 。 


fill(c) 
C: 颜色 变量 


图 13-1 显示 文本 


13.3 ”字体 大 小 


textSize () 函数 用 来 设置 文本 的 字体 大 小 ， 单 位 为 像素 。 


textSize (size) 
size: 需要 显示 的 文本 的 字体 大 小 


示例 : 

13-2 
size(200, 200); 
得 1]1 (2557070)7 // 填充 颜色 为 红色 
textSize (20); // 设置 文本 字体 大 小 为 20 像 素 
text ("I love Processing",20,50); // 显示 囊 
text (3.142,20,150); // 显示 


运行 结果 如 图 13-2 所 示 。 


图 13-2 ”显示 文本 


下 面 例子 对 比 不 同 字体 大 小 的 效果 ， 如 图 13-3 所 示 。 


示例 : 


size(200,200); 

i111(0)? 

String s="textSize"; 

textSize (10); // 设置 字体 大 小 为 10 像 素 
text (s, 50, 50) 7 

textSize (20) 7 // 设置 字体 大 小 为 20 像 素 
text (s, 50,100) 7 

textSize (30) 7 // 设置 字体 大 小 为 30 像 素 
text (s, 50,150); 


13.4 ”文本 对 齐 方式 


Processing 中 文本 对 齐 的 方式 有 两 大 类 ， 一 类 是 文本 水 平 对 齐 ， 另 一 种 是 文本 垂直 对 齐 。 文 本 的 对 齐 方式 通过 textAlign () 的 参数 来 设置 。textAlign () 函数 有 两 种 重 载 方法 ， 一 种 是 只 设置 水 平 对 


齐 ， 另 一 种 是 设置 水 平 对齐 同 时 也 设置 垂直 对 齐 。 


图 13-3 设置 字体 大 小 


textAlign (h) 

textAlign (hyo) 
h: 水 平 对 齐 方式 
O: 垂直 对 齐 方式 


其 中 文本 水 平 对 齐 方式 又 分 为 3 种 ， 如 表 13-2 所 示 。 


参 数 
RIGHT 
CENTER 
ER 


以 下 是 3 种 对 齐 方式 的 对 比 ， 效 果 如 图 13-4 所 示 。 


表 13-2 文本 水 平 对 齐 方式 


对 齐 方式 
右 对 齐 
居中 对 齐 
左 对 齐 


size (200,200); 
rectMode (CORNER); 
£1i11 (0); 

String s="textAlign"; 
textSize (20); 


textAlign (LEFT); // 向 左 对 齐 
text (s, 100, 50) 7 
textAlign (CENTER) ; // 居中 对 齐 
text (s, 100, 100); 
textAlign (RIGHT) ; // 向 右 对 齐 


text (s, 100,150); 


13-4 


图 13-4 文本 水 平 对 齐 方式 


可 以 看 到 ， 左 对 齐 指 的 是 文本 左边 缘 与 设置 的 坐标 x 重合 。 同 理 ， 右 对 齐 就 是 文本 右边 缘 与 设置 显示 文本 的 坐标 x 重合 。 


垂直 对 齐 方式 有 4 种 ， 如 表 13-3 所 示 。 


参 数 
TOP 
CENTER 
BOTTOM 
BASELINE 


与 设置 水 平 对 齐 方式 不 同 的 是 ， 设 置 垂 直 对 齐 方式 的 同时 也 要 设置 


表 13-3 ”文本 垂直 对 齐 方式 


对 齐 方式 
上 对 齐 
居中 对 齐 
下 对 齐 
基线 对 齐 


水 平 对 齐 方式 ， 需 要 向 textAlign () 传 入 两 个 参数 。 


示例 : 


size (200,200); 

textSize (15); 

£i11 (0); 

text ("BASELINE", 50, 30); 
line(0, 30,wigdth, 30); 
textAlign (LEFT, CENTER); 
line(0, 70, wigdth, 70); 
text ("CENTER", 50, 70); 
textAlign (LEFT, BOTTOM); 
line(0, 130, width, 130); 
text ("BOTTOM", 50, 130); 
textAlign (LEFT, TOP); 
line(0, 160, width, 160); 
text ("TOP", 50, 160); 


垂直 默认 对 齐 方式 ， 基 线 对 齐 
/ 画 出 


水 旦 外 和 对， 秋 直 居中 对 齐 


本 
的 


本 
和 


画 
显示 文本 


图 13-5 重 直 对 齐 方式 


从 对 比 图 中 可 以 看 出 ， 基 线 对 齐 与 向 下 对 齐 不 同 的 是 基线 对 齐 的 文本 贴 着 基线 ， 即 设置 显示 文本 的 坐标 y。 


13.5 “文本 行 高 


当 显 示 的 文本 有 多 行 的 时 候 ， 可 用 textLeading () 函数 设置 文本 的 行 与 行 之 间 的 高 度 ， 参 数 的 单位 为 像素 。 


示例 : 


size(300,200); 
textSize (15); 
£i11 (0); 
textLeading (15) 7 为 15 

String s="leading\nleading\nleading"; // 字符 串 变 量 ，“\n” 表 示 换 行 
text (s,20, 50); 


textLeading (25); // 设置 行 高 为 25 
text (s, 100, 50) 7 
textLeading (35) 7 // 设置 行 高 为 35 


text (sy 200, 50) 7 


运行 结果 如 图 13-6 所 示 。 


图 13-6 ”文本 行 高 


13.6 ”文本 宽度 


textWidth () 可 以 获取 文本 的 宽度 ， 它 计算 的 是 文本 字体 显示 的 像素 宽度 。 


示例 : 


二 3 
size(300,200); 
textSize (10); 
£i11 (0); 
textSize (28) 7 
String s = "abc"; 
float swidth = textWidth(s); // 获取 字符 串 s 的 宽 
text (s, 0, 40); 
line (swigth, 10, swidth, 60); // 务 出 文本 的 宽 所 在 的 直线 
String sl = "abcde"; 
float swidthl = textwidth(s1); // 获取 字符 串 s1 的 宽 
text (sl, 0, 100); 
line (swidthl，70，swidthl，120); // 画 出 文本 的 宽 所 在 的 直线 


图 13-7 获取 文本 的 宽 


13.7 ”创建 字体 


前 面 使 用 字体 都 是 系统 自 带 的 ， 为 了 使 用 不 同 的 字体 ， 可 以 创建 字体 。 创 建 字体 需要 用 到 PFont 类 。 首 先 要 先 实例 化 一 个 PFont 对 象 。 


PFont MyText 


有 了 PFont 对 象 之 后 ， 就 可 以 初始 化 字体 对 象 ， 可 以 设置 字体 的 名 称 、 大 小 以 及 字体 显示 是 否 平滑 等 。 


初始 化 PFont 对 象 需要 用 到 createFont () 函数 。createFont () 有 两 种 重 载 形式 。 


createFont (name, textSize) 

CreateFont (name, textSize,booleanSmooth, charset) 

name: 字体 的 名 称 

textSize: 字体 的 大 小 

booleanSmooth: 设置 字体 是 否 平滑 处 理 ， 该 参数 为 boolean 类 型 ， 为 可 选 参数 
Charset: 设置 字符 集 ， 为 可 选 参数 

booleanSmooth: 设置 字体 是 否 平滑 处 理 ， 该 参数 为 boolean 类 型 ， 为 可 选 参数 
charset: 设置 字符 集 ， 为 可 选 参数 


示例 : 


13-8 
PFont MyText=createFont ( “MyText” ,20,true); 
// 创建 名 为 MYTest 的 字体 ， 大 小 为 18， 平 滑 处 理 


textFont () 函数 可 以 让 我 们 使 用 自己 创建 的 字体 。 


textFont (name) 
name: 需要 用 到 的 字体 的 名 称 


示例 : 


13-9 
PFont MyText=createFont ("MyText", 20); 
// 创建 字体 MyText， 默 认 大 小 为 20 
textFont (MyText) 7 // 设置 字体 为 MyText 
text ("test",10,50); // 显示 字体 test 


效果 如 图 13-8 所 示 。 


图 13-8 创建 字体 


编程 人 员 给 自己 创建 的 字体 命名 的 时 候 ， 有 可 能 与 系统 的 字体 重 名 ， 为 了 避免 这 种 情况 ， 我 们 需要 知道 系统 所 有 已 有 字体 的 名 称 。 可 使 用 PFont 成 员 浮 数 list () 查看 系统 已 有 的 字体 ， 它 返回 一 个 字符 
串 数 组 ， 存 放 字体 的 名 称 。 


示例 : 


3-10 
String[] text =PFont.list(); 
println (text) 7 


结果 如 图 13-9 所 示 。 


bold lraian 
Pro 3 Traian Pro 3 Bold TraianPro3-Bold TrajanPro3- 
Rerular Trebuchet MS Trebuchet YS Bold Trebuchet 
MS Bold Italic Trebuchet MS Italic Tunga Tunga 
Bold Txt Universal yath 1 BT Utsaah Utsaah Bold 
Utsaah Bold Italic Utsaah Italic Va 
ni Vani Bold Verdana Yerdana Bold Verdana Bold 


ltalic Yerdana Italic Vijaya Viijaya Bold Viner 

Hand IIC Vineta BT Vivaldi Italic Yladimir Script 
Yrinda Yrinda Bold Webdings Wide Latin ey 
Wingdings 2 Wingdings 3 仿宋 华文 中 宋 华文 仿宋 华文 
宋体 华文 彩云 华文 新 谣 华文 楷体 华文 瑰 珀 华文 细 黑 


义 行 楷 pe 宋体 幼 园 微软 雅 黑 微软 牙 黑 Bold 
; 到 素 周作 


图 13-9 系统 中 已 有 的 字体 


绘制 一 辆 行驶 中 的 公交 车 ， 如 图 14-1 所 示 。 车 身 侧 面 用 黄色 装饰 ， 公 交 车 有 车 窗 (矩形 ) 和 车 轮 ( 圆 ) ， 车 向 前 行驶 的 过 程 中 车 轮 会 一 直 滚 动 。 


图 14-1 公交 车 效果 图 
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int Width = 1000; // 确定 输 a 的 大 小 0 改 数值 
int Height = 700; 宽 为 1 高 为 70 
£1 ove = 0; 名 值 为 0 
£1 radius = 15 
£1 adian = 0; 
void Soe { 
e (Width, Height); // 确定 输出 框 的 大 小 

} 
void drar 
{ a 300+move==Width) 

{ 

move=0; // 当 公交 车 走 完整 个 窗口 时 回 到 起 始 位 置 重新 开始 
} 
backgrouid (235); // 设置 背景 色 为 白色 
cl r (255,255,0); // 创建 一 个 黄色 


i c2 = color(0); // 创建 一 个 黑色 


strokeWeight (3) 7 // 描 边 宽度 为 3 
stroke (c2); // 描 边 颜色 为 黑色 
// 画 出 公交 车 侧面 的 窗户 
rect (Width/3-300+move, Height/2, 300, 100, 10, 40, 10,10); 
/* rect (a,b,c,d,tl1,tr,br,bl) 
a: 左上 角 的 坐标 
b: 右上 角 的 坐标 
c: 拢 形 宽 
d: 憩 形 高 
t1: 左上 角 圆 角 半 径 
tr: 右上 角 圆 角 半 径 
br: 右 下 角 圆 角 半 径 
bl1: 左下 角 贺 角 半 径 */ 
for (int i=1;i<7;++i)} 
{ line(Width/3-300/7*i+move,Height/2,Width/3-300/7*i+move,Height/2+50); 
} 
for (int k=37k<=117k+=2) 
{ line (Width/3-300/14*k+move Height/2,Width/3-300/14*k+tmove Height/2+15) 7 
} 
line (Width/3-300/7+move, Height/2+15,Width/3-300/7*6+move, Height/2+15); 
line (Width/3-300/7*6+move, Height/2+25,Width/3-300+move, Height/2+25); 
fill(cl) 7 // 填充 公交 车 为 黄色 
rect (Width/3-300+move, Height/2+50, 300, 50, 0,0,10,10); 
// 开始 画 车 轮 
pushMatrix(); // push Matrix() 与 PopMatrix() 函数 来 限定 坐标 
// 变换 作用 域 
translate (Width/3-300/4+move, Height/2+100); 
// 坐标 系统 X 方 向 位 移 Width/3-300/4+move，Y 方 向 位 移 Height/2+100 


ring(0,0,10,15,0,TwO_PI); // 自 定义 画 车 轮 函 数 
popMatrix(); // 取消 translate () 的 变换 效果 
pushMatrix(); // push Matrin() 与 popMatrix() 函数 来 限定 坐标 变 


// 换 作 用 域 
translate (Width/3-300/4*3+move, Height /2+100); 
// 坐标 系统 X 方 向 位 移 Width/3-300/4*3+move，Y 方 向 位 移 Height/2+100 
ring(0,0,10,15,0,TWO PI); 自 定 义 画 车 轮 函 数 


popMatrix(); ranslate () 的 变换 效果 
moVe++ 7 // 公交 车 全 部 坐标 递增 ， 即 向 前 移动 
} 
/*ring (x, y, rl1, r2, start stop) 
X: 圆 环 中 心 X 坐 标 
y: 圆 环 中 心 Y 坐 机 


1: 圆 环 内 半径 
r2: 圆 环 外 半径 
start: 开始 弧度 
Stop: 结束 弧度 


和 

void ring (float x, float y,float rl,float r2,float start,float end){ 
color c3 = color(255); // 创建 一 个 白色 
£1 (03); // 图 案 填 充 白 色 


strokeWeight (r2-r1); // 设置 描 边 粗细 为 内 外 半径 差 


float r = (rl+r2)*.5; 


绘制 模式 为 半径 模式 
| 椭圆 

顺 时 针 旋 转 radian 弧 度 
为 2 


arc (xy y,r,r, start,end); // 开始 
rotate (radian); 
strokeWeight (2); 
line(0,0,10,0); 

// 4 个 line () 函数 都 是 绘制 国内 的 线段 ， 作 为 车 轮 滚动 的 参照 物 
line(0,0,0,10); 
line (0,0,-10,0); 
line(0,0,0,-10); 
translate (radius, 0); // 坐标 系统 X 方 向 位 移 radius 
radian+=0.05;// 弧度 每 次 循环 都 增加 0.05 


第 14 章 ”图 像 动画 综合 实例 


14.1 实例 1: 行驶 的 公交 车 


绘制 一 辆 行驶 中 的 公交 车 ， 如 图 14-1 所 示 。 车 身 侧面 用 黄色 装饰 ， 公 交 车 有 车 窗 (矩形 ) 和 


轮 ( 


向 前 行驶 的 过 程 中 车 轮 会 一 直 


图 14-1 


14-1 
int Width = 1000; // 确定 输出 框 的 大 小 ， 可 修改 数值 
int Height 700; // 宽 为 1000 为 700 
float move = 0; 初始 值 为 0 
float radius 15; 


float radian = 0; // 创建 一 个 弧度 变量 ， 初 始 值 为 0 
void setup () 1{ 
size (Width, Height); // 确定 输出 框 的 大 小 


void draw() 
{ if (Width/3-300+move==Width) 
{ 
move=0; // 当 公交 车 走 完整 个 窗口 时 回 到 起 始 位 置 重新 开始 


公交 车 效果 图 


} 
background (255); // 设置 背景 色 为 白色 


color cl = color(255,255,0); // 创建 一 个 黄色 
color c2 = color(0) 7 // 创建 一 个 黑色 
strokeWeight (3) 7 // 描 边 宽度 为 3 
stroke (c2); // 描 边 颜色 为 黑色 


// 画 出 公交 车 侧面 的 窗户 
rect (Width/3-300+move, Height/2, 300, 100, 10, 40, 10,10); 
/* zecttarbyecyditlitrrbrrbl) 

a: 左上 角 的 坐标 

b: 右上 角 的 坐标 

C: 拢 形 宽 


for (int i=1;i<7;++i) 

{ line(Width/3-300/7*i+move,Height/2,Width/3-300/7*i+move, Height/2+50); 
} 

for (int k=3;k<=11;k+=2) 

{ line (Width/3-300/14*kt+move, Height/2,Width/3-300/14*k+move, Height/2+15); 
} 


line (Width/3-300/7+move, Height/2+15,Width/3-300/7*6+move, Height/2+15); 
line (Width/3-300/7*6+move, Height/2+25,Width/3-300+move, Height/2+25); 


FT:(oly // 填充 公交 车 为 黄色 

rect (Width/3-300+move, Height/2+50, 300, 50, 0,0,10,10); 

// 开始 画 车 轮 

pushMatrix(); // push Matrix() 与 PopMatrix() 函数 来 限定 坐标 


// 变换 作用 域 
translate (Width/3-300/4+move, Height/2+100); 
// 坐标 系统 X 方 向 位 移 Width/3-300/4+move，Y 方 向 位 移 Height/2+100 


ring (0,0,10,15,0,TWO_PI); // 自 定义 画 车 轮 函 数 

popMatrix(); // 取消 translate () 的 变换 效果 

PushMatrix() 7 // push Matrin () 与 PopMatrix() 函数 来 限定 坐标 变 
// 换 作用 域 


translate (Width/3-300/4*3+move Height/2+100) 7 
// 坐标 系统 X 方 向 位 移 Width/3-300/4*3+move，Y 方 向 位 移 Height/2+100 


ring (0,0,10,15,0,TWO_PI); // 自 定义 画 车 轮 函 数 
PoPMatrix () 7 // 取消 translate() 的 变换 效果 
TOoVe++ 7 // 公交 车 全 部 坐标 递增 ， 即 向 前 移动 


} 
/*ring (x, y, rl1, r2, start, stop) 
X: 圆 环 中 心 X 坐 标 
Y: 圆 环 中 心 Y 坐 标 
F1: 圆 环 内 半径 
2: 圆 环 外 半径 
start: 开始 弧度 
stop: 结束 统 度 


A 

void ring(float x, float y,float rl,float r2,float start,float end){ 
color c3 = color(255); // 创建 一 个 白色 
fi11 (03)y // 图 案 填 充 白色 
strokeWeight (r2-r1); // 设置 描 边 粗细 为 内 外 半径 差 


float r = (rl+r2)*.5; 
// 求 出 内 外 半径 的 中 间 值 ， 作 为 arc () 函数 的 绘制 半径 


ellipseMode (RADIUS) // 设置 椭圆 绘制 模式 为 半径 模式 
arc (x,y,r,r,start,end); // 开始 绘制 椭圆 

rotate (radian); // 坐标 系统 顺 时 针 旋转 radian 弧 度 
strokeWeight (2); // 描 边 宽度 为 2 


line(0,0,10,0); 

// 4 个 line () 函数 都 是 绘制 国内 的 线段 ， 作 为 车 轮 滚动 的 参照 物 
line(0,0,0,10); 
line(0,0,-10,0); 
line(0,0,0,-10); 
translate (radius, 0); // 坐标 系统 X 方 向 位 移 radius 
radian+=0.05;// 弧度 每 次 循环 部 增加 0.05 


14.2 实例 2: 自由 落体 的 弹跳 小 球 


模拟 一 个 圆 球 做 自由 落体 运动 ， 落 地 后 小 球 会 撞 扁 一 点 ， 再 向 上 回 弹 ， 如 此 往复 直至 在 地 面 静 止 ， 如 图 14-2 所 示 。 


图 14-2 自由 落体 的 弹跳 小 球 


涉及 知识 点 : 圆 的 绘制 、 椭 圆 的 绘制 、 坐 标 变换 、 变 换 动画 。 以 sinx/x 函 数 的 绝对 值 为 原型 构建 函数 来 描述 小 球 的 运动 轨迹 ， 如 图 14-3 所 示 。 
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图 14-3 sinx/x 函 数 


14-2 
int tl = 57 // 球 运动 的 第 一 个 时 间 过 度 点 
int t2 = 97 // 球 运动 的 第 二 个 时 间 过 度 点 
int t3 = 157 // 球 运动 的 第 三 个 时 间 过 度 点 
float t = 0; // 小 球 运动 的 时 间 变 量 
float Sa = 0; // 小 球 圆心 的 y 轴 变量 
void setup () 
{ size(500,500) 7 // 设置 一 个 500 像 素 宽 、500 像 素 高 的 窗口 
frameRate (55) // 设置 55 帧 速率 
void draw() 
{ background (204); // 设置 灰色 背景 
rotate (PI); // 将 坐标 轴 旋 转 180 度 
translate (-500, -450); // 再 将 坐标 原 0 
line (0,0,500,0); // 画 一 条 直线 ， 作 为 地 
translate (250, Sa) ; // Ey 
ellipseMode (RADIUS) ; // 椭圆 模式 为 默认 模式 
if (t<t1*PI) 
{ // 小 球 处 于 第 一 个 时 间 过 度 点 前 
Sa = abs (1300*sin (t)/t); // 小 球 圆心 的 y 轴 坐标 


if(t<(t1-1.7)*PI&&Sa <=10) 
// 小 球 处 于 第 一 个 时 间 过 度 点 前 的 t1-1.7 内 且 小 球 接近 地 面 线 
ellipse (0,40+abs (10*sin (t)), 50, 40+abs (10*sin (t) ) ) 7 
// 撞 到 地 面 压 扁 的 小 球 


else 
ellipse (0, 50, 50, 50); // 第 一 个 时 间 过 度 点 前 小 球 的 正常 显示 
if (t>=t1*PI&&t<=t2*PI) 
// 小 Rh 
Sa = abs (550*sin (七 ) /t) 7 // 小 球 圆心 的 y 轴 
if(Sa <=10) // 当 小 re 
ellipse (0,47+abs (3*sin(t)),50,47tabs (3*sin(t)));// 撞 到 地 面 压 扁 的 小 球 
else 
ellipse (0, 50, 50, 50); // 小 球 处 于 第 一 个 时 间 过 度 点 和 第 二 个 时 间 过 度 点 之 
} // 间 小 球 的 正常 显示 
if (t>t2*PpIg&t<=t3*PI) 
{ // 小 球 处 于 第 二 四 个 时 间 过 度 点 之 间 
Sa = abs (190*sin (t)/t); // 小 球 圆心 的 y 轴 坐 
ellipse (0, 50, 50, 50); // 正常 显示 
} 
if (t>t3*PI) 
// 小 球 处 于 第 三 个 时 间 过 度 点 之 后 
ellipse (0, 50, 50, 50); // 正常 显示 
: 
if (t<t1*PI) 
t+=0.03; // 第 一 个 时 间 过 度 点 前 小 球 运动 的 时 间 刷 新 
if (t>=t1*pIg&t<=t2*PI) 
t+=0.08; // 第 二 个 时 间 过 度 点 和 第 三 个 时 间 过 度 点 之 间 小 球 
// 运动 的 时 间 刷 新 
if (t>t2*PI) 
t+=0.13; // 第 二 个 时 间 过 度 点 后 小 球 运动 的 时 间 刷 新 
if (t>20*PI) 
t= 0; // 时 间 大 于 20*pi 后 时 间 重 置 为 0 


14.3 实例 3: 飞机 类 


窗口 中 随机 出 现 各 种 飞机 ， 有 战斗 机 和 友 炸 机 ， 它 们 的 速度 、 颜 色 、 运 动 方 向 都 是 随机 的 ， 战 斗 机 的 速度 要 比 友 炸 机 快 ， 如 图 14-4、 图 14-5 所 示 。 此 例 运 用 到 类 和 类 的 继承 。 


图 14-4 ”飞机 类 1 


图 14-5 ”飞机 类 2 


14-3 
void setup () 
{ size(1280,720); // 设置 窗口 的 大 小 
planes=new Plane[10]; // 初始 化 飞机 数组 ， 设 置 飞机 数量 为 10 
bombers=new Bomber[10]; // 初始 化 砂 炸 机 数组 ， 设置 囊 炸 机 数量 为 10 
for (int i=0;i<planes.length;i++) 
{ // 创建 飞机 对 象 


Planes [i]=new Plane(); 


} 
for (int i=0;i<bombers.length;i++) 


// 初始 化 每 个 台 炸 机 对 象 
bombers [i]=new Bomber (); 


void draw () 
{ background (204) 7 


{ Planes [il .update (); 


{ 


randomSeed (47); // 随机 数 种 子 
for (int i=0;i<planes.length;i++) 
// 更 新 每 架 飞机 的 位 置 


Planes [i] .DisplayPlane (random (255) , random (255) , random (255) ) 7 
// 和 画 出 飞机 ， 颜色 随机 
} 
for (int i=0;i<bombers.length;i++) 

bombers [i] .update (); 
bombers [i] .DisplayPlane (random(255), random (255), random (255)); 
} 


} 
Plane[] planes; // 声明 一 个 存放 飞机 对 象 的 数组 
Bomber [] bombers; // 声明 一 个 存放 束 炸 机 对 象 的 数组 
class Plane 
{ PVector position; // 创建 位 置 向 量 
PVector speed; // 创建 速度 向 量 
Plane() 
{ // 飞机 类 构造 函数 
float x=random(width); // 飞机 初始 坐标 ， 在 画面 范围 内 随机 获得 
float y=random(height); 
position= new PVector (x,y); // 将 左边 赋值 给 位 置 向 量 
speed= PVector.random2D(); // 速度 向 量 的 方向 随机 获得 
) 


speed.setMag (random (5,10) 


了 


// 速度 向 量 的 大 小 为 5~10 随 机 获得 
} 


void update () 
// 更 新 飞机 位 置 的 函数 
position.add (speed); // 在 原 有 的 位 置 向 量 上 加 上 速度 向 量 
boundaryrel () 7 // 调用 飞机 碰 到 边缘 后 反弹 函数 


} 
void DisplayPlane (float R,float G,float B) 
// 务 飞 机 的 函数 ， R、G、B 三 个 参数 表示 飞机 的 颜色 


float x=position.x; // 飞机 的 左边 由 位 置 向 量 获得 
float y=position.y; 

fi1l (R,G,B); // 填充 飞机 的 颜色 
beginShape (); // 开始 绘制 图 形 


Vertex (x, y); 
vertex (x-10, y+30); 
vertex (x-10, y+50); 
Vertex (x-40, y+80); 
vertex (x-40, y+85); 
vertex (x-10, y+85); 
vertex (x-10, y+90); 
Vertex (x-20, y+96); 
vertex (x-20, y+100) 
vertex (x+20, y+100); 
vertex (x+20, y+96); 
vertex (x+10, y+90); 
vertex (x+10, y+85); 
Vertex (x+40, y+85); 
vertex (x+40, y+80); 
vertex (x+10, y+50); 
vertex (x+10, y+30); 
vertex (x, y); 

endSshape (); // 结束 绘制 图 形 
} 
void boundaryrel (){ 
// 如 果 飞 机 x 坐标 小 于 0， 把 x 坐标 设置 为 0， 束 度 x 分 量 反 向 


if (position.x<0) 
{ if(position.x<0) 


{ 


} 


Position.x=07 
speed.x*=-1; 
} 
else if (position.x>width) 


// 如 果 飞 机 X 坐 标 大 于 画布 帘 ， 把 X 坐 标 设置 为 帘 ， 速 度 X 分 量 反 向 
position.x=width; 
Speed .x*=-1; 
} 
if (position.y<0) 
{ // 如 果 飞 机 y 坐 标 小 于 0， 把 x 坐标 设置 为 0， 速 度 y 分 量 反 向 
position.y=0; 
speed.y*=-1; 


else if (position.y>height) 

{ // 如 果 飞 机 yY 坐 标 大 于 画布 高 ， 把 Y 坐 标 设置 为 高 ， 速 度 Y 分 量 反 向 
position.y=height; 
speed.y*=-1 


} 


class Bomber extends Plane // 砂 炸 机 对 象 ， 继承 飞机 向 量 
{ 


void DisplayPlane (float R,float G,float B)// 改写 绘制 飞机 函数 
{ 
float x=position.x; 
float y=position.y; 
fill (RGrB)? 
beginShape (); 
Vertex (x, y); 
Vertex (x-40, y+37 
Vertex (x-30, y+30 
Vertex (x-20, y+37 
Vertex (x-10, Yt30. 
vertex (x, y+37); 
vertex (x+10, y+30); ; 
vertex (x+20, y+37); 
Vertex (x+30, y+30); 
) 7 
这 


); 
这 
) 7 


天 
了 
了 


vertex (x+40, y+37); 
vertex (x+50, y+30 
Vertex (x, y); 
endShape 0); 
} 
Bomber () { // 构造 函数 ， 圳 炸 机 的 速度 大 小 为 2~5 的 随机 数 
speed.setMag (random (2, 5)); 
} 


从 窗口 


14.4 实例 4: 础 撞 变 形 的 四 边 形 


左边 飞 出 一 个 四 边 形 ， 碰 撞 到 窗口 边缘 后 变 成 形状 不 同 的 另 一 个 四 边 形 。 被 弹 回 的 四 边 形 继续 运动 直到 再 撞 上 窗 [ 


边缘 ， 


变 成 其 


他 四 边 形 ， 如 此 


复 ， 如 区 


14-6 所 示 。 


图 14-6 碰撞 变形 的 四 边 形 


涉及 知识 : 四 边 形 绘制 、 坐 标 变换 、 随 机 数 产 生 、 变 换 动画 。 


设计 思路 : 在 窗口 边缘 随机 设置 两 个 点 ， 使 四 边 形 从 初始 点 运动 到 终点 ， 实 现 从 窗口 的 一 边 运动 到 另 一 边 。 可 以 通过 修改 step 变 量 来 修改 速度 ; 每 次 碰撞 随机 选择 变 成 多 边 形 还 是 矩形 ， 形 状 和 大 小 随 
机 发 生变 化 ， 使 四 边 形 看 起 来 像 是 被 碰撞 变形 。 


14-4 
float startX = 5; // 最 初 的 X 轴 
float startY = 155; // 最 初 的 Y 轴 
float stopX = 0; // 最 终 的 X 轴 
float stopY = 0; // 最 终 的 Y 轴 
float x = startX; // 现在 的 X 轴 
float y = startY7 // 现在 的 Y 轴 
float step = 0.0057 // 每 步 的 尺寸 (0.0~1.0) 
float pct = 0.0; // 百分比 (0.0~1.0) 
int side = 0; // 下 一 次 终点 边界 
int number0 = 0; // 四 边 形 的 类 型 变量 
float numberl = 0; // 矩形 的 长 
float number2 = 0; // 矩形 的 宽 
float numberx10 = 0; // 四 边 形 第 一 个 点 初始 的 X 坐 标 
float nurbery10 = 0; // 四 边 形 第 一 个 上 上 标 
float numberx20 = 0; // 四 边 形 第 二 个 标 
float numbery20 = 0; // 四 边 形 第 二 个 
float numberx30 = 0; // 四 边 形 第 三 个 
float numbery30 = 0; // 四 边 形 第 三 个 
float numberx40 = 0; // 四 边 形 第 四 个 
float numbery40 = 0; // 四 边 形 第 四 个 
float numberx11 = 0; // 四 边 形 第 一 个 
float numberyll = 0; // 四 边 形 第 一 个 
float numberx21 = 0; // 四 边 形 第 二 个 
float numbery21 = 0; // 四 边 形 第 二 个 
float numberx31 = 0; // 四 边 形 第 三 个 
float numbery31 = 0; // 四 边 形 第 三 个 
float numberx41 = 0; // 四 边 形 第 四 个 
float numbery41 = 0; // 四 边 形 第 四 个 
void setup () 
{ size(350,310); // 设置 一 个 350 像 素 宽 、310 像 素 高 的 窗口 
frameRate (80); // 设置 80 帧 速率 
smooth () 7 
§ 
void draw () 
{ background (204) 7 // 设置 灰色 背景 

if(pct == 0) 

. // 当 运 动 进度 为 0 时 进行 边 长 随机 定义 及 四 边 形 的 选择 
randnumber () // 四 边 形 各 边 、 点 参数 的 随机 生成 
choseside (side) ; // 四 边 形 当前 所 在 边界 

} 

if(pct < 1.0){ // 四 边 形 处 于 运动 状态 


if (number0 一 0){ // 给 形 运动 


X = StartX + ((stopX-startX) * pct); // 矩形 中 心 


y= startY + ((stopY-startY) * pct); // 矩形 中 心 3 
PCct += step; // 刷新 运动 进度 
randomrect (number0, x, y); // 显示 当前 矩形 
} 
elsel{ // 四 边 形 运 动 


numberx11 = numberx10 + ((stopX-startX) * pct); 
nuribery11 = numbery10 + ((stopY-startY) * pct); 
// 四 边 形 当前 第 一 个 点 坐标 
numberx21 = numberx20 + ((stopX-startX) * pct); 
numbery21 = numbery20 + ((stopY-startY) * pct); 
// 四 边 形 当前 第 二 个 点 坐标 


numberx31 = numberx30 + ((stopX-startX) * pct); 
numbery31 = numbery30 + ((stopY-startY) * pct); 
numberx41 = numberx40 + ((stopX-startX) * pct); 
numbery41 = numbery40 + ((stopY-startY) * pct); 
// 四 边 形 当前 第 四 个 点 坐标 
pet += step; 
// 刷新 运动 进度 
randomrect (numiber0, x, y); 
// 显示 当前 四 边 形 
。 } 
if(pct >= 1){ // 当 进 度 进行 到 100% 
startX = stopX; 
startY = stopY; // 将 终点 坐标 设置 为 初始 坐标 
pct = 0; // 将 进度 归 0 
i 
void choseside (int side){ 
Switch (side){ 
case 0:side0 () ;break; // 当前 位 于 屏幕 左边 边界 
case 1:sidel () ;break; // 当前 位 于 屏幕 上 边 边界 
case 2:side2();break; // 当前 位 于 屏幕 右边 边界 
case 3:side3();break; // 当前 位 于 屏幕 下 边 边界 
default :break; 
} 
} 
void sigde0(){ // 当前 位 于 屏幕 左边 边界 
switch ((int)random(3)) 
{ // 随机 生成 3 个 数字 决定 下 次 运动 到 哪个 边界 


case 0:stopX = (int)random(270)+40; stopY = 10; 
// 下 次 运动 到 屏幕 上 边 
side = 1; // 返回 终点 边界 的 上 边 编号 
break; 
Case 1:stopX = 340;stopY = (int)random(250)+30; 
// 下 次 运动 到 屏幕 右边 
side = 2; // 返回 终点 边界 的 右边 编号 
break; 
Case 2:stopX = (int)random(270)+40;stopY = 300; 
// 下 次 运动 到 屏幕 下 边 
side = 3; // 返回 终点 边界 的 下 边 编号 
break; 
default :break; 


} 


} 
void sigdel(){ // 当前 位 于 屏幕 上 边 边界 
Switch ((int)random(3)) 
// 随机 生成 3 个 数字 决定 下 次 运动 到 哪个 边界 
case 0:stopX = 10;stopY = (int)random(250)+30; 

// 下 次 运动 到 屏幕 左边 
side = 0; // 返回 终点 边界 的 左边 编号 
break; 
Case 1:stopX = 340;stopY = (int)random(250)+30; 


动 到 屏幕 右边 
// 返回 终点 边界 的 右边 编号 


Case 2:stopX (int) random(270)+40;stopY = 300; 
// 下 次 运动 到 屏幕 下 边 
side = 3; // 返回 终点 边界 的 下 边 编号 
break; 
default:break; 


} 
} 
void side2(){ // 当前 位 于 屏幕 右边 边界 
switch ((int)random(3)) 
{ // 随机 生成 3 个 数字 决定 下 次 运动 到 哪个 边界 
case 0:stopX = 10;stopY = (int)random(250)+30; 
// 下 次 运动 到 屏幕 左边 
side = 0; // 返回 终点 边界 的 左边 编号 
break; 
case 1:stopX = (int)random(270)+40;stopY = 10; 
// 下 次 运动 到 屏幕 上 边 
side = 1; // 返回 终点 边界 的 上 边 编号 
break; 
Case 2:stopX = (int)random(270)+40;stopY = 300; 
// 下 次 运动 到 屏幕 下 边 
side = 3; // 返回 终点 边界 的 下 边 编号 
break; 
default :break; 
} 
} 
void side3(){ // 当前 位 于 屏幕 右边 边界 
switch ((int)random(3)){ 
// 随机 生成 3 个 数字 决定 下 次 运动 到 哪个 边界 
case 0:stopX = 10;stopY = (int)random(250)+30; 
// 下 次 运动 到 屏幕 左边 
side = 0; // 返回 终点 边界 的 左边 编号 
break; 
case 1:stopX = (int)random(270)+40;stopY = 10; 
// 下 次 运动 到 屏幕 上 边 
side = 1; // 返回 终点 边界 的 上 边 编号 
break; 
Case 2:stopX = 340;stopY = (int)random(250)+30; 
// 下 次 运动 到 屏幕 右边 
side = 2; // 返回 终点 边界 的 下 边 编号 
break; 
default :break; 
} 
bl 
void randnumber (){ 


number0 = (int)random(2); // 等 于 0 为 矩形 ， 等 于 1 为 四 边 形 
numberl = (int)random(40)+40; // 矩形 的 长 

number2 = (int)random(30)+20; // 拢 形 的 宽 

numberx10 = -zandom(20) + StartX7 

numbery10 = - (random(10)+20) + StartY7 


// 初始 四 边 形 第 一 个 点 的 坐标 

numberx20 = random(20)+30 + startXx; 
numbery20 = - (random(10)+20) + StartY7 
// 初始 四 边 形 第 二 个 点 的 坐标 

numberx30 = random(20)+30 + startXx; 
numbery30 = random(10)+20 + StartY7 

// 初始 四 边 形 第 三 个 点 的 坐标 

numberx40 = -random(20) + StartX7 
numbery40 =random(10)+20 + StartY7 

// 初始 四 边 形 第 四 个 点 的 坐标 


} 
void randomrect (int number,float x,float y){ // 随机 生成 一 种 四 边 形 模式 
switch (number){ 


case 0:rect0 (x,y) ;break; // 矩形 模式 
Case 1:rectl] () ;break; // 四 边 形 模式 


Gefault:break; 

} 

} 

void rect0 (float x,float y){ // 给 形 模式 
rectMode (CENTER) ; // 默认 模式 
rect (x, y, numberl, number2); 

} 

void rect1(){ // 四 边 形 模式 


rectMode (CENTER) ; // 默认 模式 
quad (numberx11,numbery1l11,numberx21,numbery21,numberx31,numbery31,numberx41， 
numbery41); 
} 


第 三 篇 “互动 篇 


“第 15 章 和 鼠标 与 键盘 互动 


“ 第 16 章 ”Processing 与 Arduino 互 动 


第 15 章 “鼠标 与 键盘 互动 


与 Processing 程 序 进行 互动 ， 最 直接 使 有 


的 外 设 是 鼠标 和 键盘 。 鼠 标 可 以 控制 屏幕 上 光标 的 位 置 和 选择 界面 元 素 ， 通 过 读 取 光 标的 位 置 ( 即 坐标 x 和 y) 所 获取 的 值 ， 可 以 上 


素 。 收 集 和 分 析 这 些 坐标 可 以 得 到 非常 有 价值 的 信息 ， 比 如 鼠标 运动 的 方向 和 速度 。 还 能 


键盘 可 以 


于 输入 字符 ， 完 成 各 种 信息 输入 或 者 使 用 方向 键 控制 等 。 


15.1 ”鼠标 的 互动 
15.1.1 ”鼠标 相关 的 系统 变量 
1. 按 键 变量 

mousePressed 是 


于 手势 识别 和 模式 识别 。 


Processing 结 合 鼠标 和 键盘 ， 可 以 完成 各 种 丰富 的 互动 程序 。 


于 判断 鼠标 是 否 有 按键 被 按 下 的 变量 ， 是 系统 布尔 变量 。mousePressed 为 true， 代 表 有 鼠标 按键 被 按 下 ; 为 false， 代 表 没 有 鼠标 按键 被 按 下 。 


mouseButton 这 个 关键 词 表示 如 果 有 鼠标 按键 被 按 下 Processing 会 自动 跟踪 。mouseButton 的 系统 变量 包含 LEFT、RIGHT 和 CENTER， 这 取决 于 鼠标 的 哪个 键 被 按 下 。 


示例 : 画面 中 有 一 个 灰色 的 矩形 ， 鼠 标 左 键 按 下 时 变 灰 色 ， 右 键 按 下 时 变 白色 。 


来 控制 程序 界面 上 的 各 个 元 


415- 
void draw() 


{ 


if (mousePressed && (mouseButton == LEFT)) 
£i11 (0); // 黑色 
a if (mousePressed && (mouseButton == RIGHT)) 
{ fi11(255):; 省 总 
else 

£i11 (126); // 灰色 


rect (25, 25, 50, 50); 


注意 只 有 当 程序 中 有 draw () 的 时 候 和 鼠标 和 键盘 事件 才 会 工作 。 如 果 没 有 draw () ， 
2. 坐 标 变量 


mouseX 变 量 指 的 是 当前 鼠标 所 在 的 水 平 坐标 。 


mouseY 变 量 指 的 是 当前 鼠标 所 在 的 垂直 坐标 。 


示例 : 画 一 条 竖 直 的 线条 随 着 鼠标 移动 ， 如 图 15-1 所 示 。 


它们 只 会 运行 一 次 ， 并 且 会 停止 检测 事件 。 


工 5=2 
void draw() 
{ 
background (204); // 灰色 背景 
line (mouseX, 20, mouseXx, 80); // 务 线 


} 


图 15-1 线条 随 


示例 : 用 鼠标 控制 画 一 条 颜色 、 粗 细 随 机 变化 的 彩色 “绳子 ”， 如 图 15-2 所 示 。 


float x 

float y; 

float px; 

float py; 

float easing=0.05; 

void setup () 

{ 
size(800,600); 
smooth () 7 


} 
void draw(){ 
float targetX=mouseX; 
x+= (targetX-px) *easing; 
float targetY=mouseY; 
yt+= (targetY-py) *easing; 
float weight=dist (x,y,Ppx,Ppy); 
strokeWeight (weight*2); 
stroke (random (255) , random (255), random (255)); 
line (x, y, PX, PY); 
PY=Y7 
PX=x; 


图 15-2 ”颜色 和 粗细 变化 的 “绳子 ” 


3 .特殊 坐标 变量 


pmouseX 变 量 指 的 是 先前 帧 的 水 平 坐 标 。 


pmouseY 变 量 指 的 是 先前 帧 的 垂直 坐标 。 


注意 在 draw() 中 ，pmouseX 和 pmouseY 每 帧 只 更 新 一 次 (每 次 draw () 循环 的 时 候 更 新 一 次 ) 。 在 鼠标 事件 中 ， 它 们 只 会 在 事件 被 调用 的 时 候 才 会 更 新 ， 如 mousePressed () 、mouseMoved () 。 


15.1.2 ”鼠标 事件 函数 


鼠标 响应 事件 是 指 由 鼠标 的 活动 状态 所 触发 的 事件 ， 如 鼠标 移动 、 拖 动 、 按 下 、 松 开 等 。 鼠 标 事件 的 程序 结构 也 包含 了 voidsetup () 和 void draw () ， 再 加 上 相应 的 事件 函数 。 其 基本 结构 如 下 : 


证 


void setup () {http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/15704/OEBPS/VText/. .http://www.hzcourse.com/resource/readBook?path=/openresor 
void draw () {http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15704/0EBPS/Text/. .http://www.hzcourse.com/resource/readBook?path=/openresour 
void mouseClicked () 

{ 


代码 ; 
} 其 他 事件 函数 http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15704/OEBPS/Text/. .http://www.hzcourse.com/resource/readBook?path=/openresour: 


与 鼠标 事件 有 关 的 函数 如 下 。 


1. 坐 标 范围 限制 函数 


constrain () 函数 是 将 一 个 数值 限制 在 一 个 范围 内 。 


constrain (value, min, max) 


Value: 要 限制 的 数 ，min 最 小 值 ，max 最 大 值 


例如 : 

int x=constrain(35,10,90) ; // x=35 
int x=constrain(5,10,90) ; // x=10 
int x=constrain(91,10, 90) 7 // x=90 


示例 : 画 一 个 圆 跟 随 鼠 标 移动 ， 但 是 不 能 超过 矩形 范围 ， 如 图 15-3 所 示 。 


15=5 
void setup () 


size(100,100); 


nostroke (); 7 
void draw() 


i 
background (0); 


float mx=constrain (mouseX, 35, 65); Fi 

float my=constrain (mouseY, 40, 60); // 限制 y 坐 标 
£i1] (102); 

rect (20, 25, 60, 50); 

£1i11 (255)» 

ellipse (mx,my, 30, 30); // 圆 


15-3 圆 跟 随 鼠 标 移动 


2. 鼠 标 单 击 


半 


鼠标 单 击 函 数 mouseClicked () 是 在 鼠标 被 按 下 然后 松 开 的 那 一 瞬间 被 调用 的 。 


示例 : 单 击 鼠标 ， 使 背景 在 黑色 圆 形 和 白色 正方 形 之 间 切 换 ， 如 图 15-4 和 图 15-5 所 示 。 


15-6 
int value = 0; 
void draw() 


{ 


fill(value) 7 // 填 
background (100) 7 
if (value==0) 


ellipse (50, 50, 50, 50); // 圆 形 
else 
rect (25, 25, 50, S50); // 矩形 


4 


void mouseClicked() 


{ 
if (value == 0) 


value = 255; 


车 
全 
已 
本 
名 
上 
口 


15-4 第 一 次 单 击 


图 15-5 第 二 次 单 击 


示例 : 鼠标 单 击 两 次 可 以 绘制 任意 大 小 的 矩形 ， 第 三 次 单 击 鼠 标 和 矩形 消失 ， 如 图 15-6 所 示 。 


intX= 1; 

float xl, Yly 32 沈 ; 

void setup() { 
size(500, 500); 


} 

void draw() { 
background (204); 
if ((mousePressed == true) &&x 


{ 


X1 = mouseX; 
yl = mouseY; 
E 
if (x==2) { 


rectMode (CORNERS); 
rect (xl, yl, mouseX, mouseY); 


if ((mousePressed == true) &&x == 2) 
* // 第 

X2 = mouseX; 
y2 = mouseY; 


if (x==3) { 
rectMode (CORNERS); 
rect (xl, yl,: x2, y2); 


if (x = 4 


x =1; 
} 
void mouseReleased () 


{ 


x++7 


} 


图 15-6 ”和 鼠标 绘制 矩形 


3. 鼠 标 拖 动 函数 


mouseDragged () 是 鼠标 拖 动 函数 ， 当 鼠标 拖 动 的 时 候 该 函数 被 调用 。 拖 动 是 指 按 下 鼠标 ( 左 、 右 或 中 键 的 任 一 按键 ) 时 移动 鼠标 。 


示例 : 画面 中 有 一 个 黑色 的 和 矩形， 鼠标 拖 动 时 矩形 颜色 从 黑 逐 渐变 白 再 变 黑 ， 如 此 循环 ， 如 图 15-7 和 图 15-8 所 示 。 


15-8 
int value = 0; // 颜色 数值 
void draw () 


fill (value); 
rect (25, 25, 50, 50); 


} 
void mouseDragged () 


value = value + 5; 
if (value > 255) 
{ 


value = 0; 
} 
i 


图 15-7 初始 状态 


图 15-8 元 动 一 定 距 离 


4 鼠标 移动 函数 


mouseMoved () 是 鼠标 移动 函数 。 每 次 鼠标 只 要 移动 并 且 没有 按 下 任何 键 时 ，mouseMoved () 函数 就 会 被 调用 ， 如 图 15-9 所 示 。 


示例 : 一 个 矩形 上 跟随 鼠标 移动 并 不 断 改变 颜色 。 


59 
int value = 0; // 颜色 
void draw() 
{ 
fill (value); 
// 和 矩 形 


rect (25, 25, 50, 50); 
void mouseMoved () 


value = value + 5; 
if (value > 255) 
{ 


value = 0; 


图 15-9 ”移动 鼠标 


示例 : 鼠标 移动 时 出 现 黄色 正方 形 ， 拖 动 时 出 现 红色 圆 形 ， 如 


区 


15-10 和 图 15-11 所 示 。 


15-10 
void setup () 


{ 
size(300,300); 
background (255); 
stroke (0, 50); 


} 
void draw(){ } 
void mouseMoved () 


{ 
rectMode (CENTER); 
fi1].(255,255,0,50)? 
rect (mouseX, mouseY, 50, 50)»; 
} 
void mouseDragged () Ma 形 


{ 
£i11 (255,100, 0,50); 
ellipse (mouseX, mouseY, 50, 50)»; 


图 15-10 ”移动 鼠标 


图 15-11 拖 动 鼠标 


5. 鼠 标 按 下 函数 


mousePressed () 是 鼠标 按 下 函数 ， 当 鼠标 被 按 下 的 时 候 ，mousePressed () 函数 就 会 被 调用 。 


6 .鼠标 释放 函数 


mouseReleased () 是 鼠标 释放 函数 ， 当 鼠标 被 松 开 时 ，mouseRealeased () 函数 就 会 被 调用 。 


示例 : 画面 中 有 一 个 黑色 的 矩形 ， 鼠 标 左 键 按 下 时 矩形 随 鼠 标 移动 ， 松 开 时 回 到 原 位 ， 如 图 15-12 和 图 


15-13 所 示 。 


int value = 0; // 状态 记录 
void draw() 


ground (100); 
fil1(0)7 


rect (mouseX, mouseYy, 
void mousePressed () 


Value=17 


} 
} 
void monu 


value=0; 


图 15-12 初始 状 


图 15-13 ” 拖 动 鼠标 


注意 mousePressed () 函数 用 在 鼠标 被 按 下 的 响应 事件 中 ， 有 两 种 实现 的 方式 : 一 是 使 用 void mousePressed () ， 另 一 种 方式 是 在 void draw () 中 使 用 if (mousePressed) 。 


7. 鼠 标 滚轮 函数 


mouseWheel () 是 鼠标 滚轮 函数 ， 当 鼠标 滚轮 滚动 时 mouseWheel () 函数 会 被 调用 ， 使 用 前 需要 定义 参数 mouseWheel (MouseEvent event) ; 而 event.getAmount () 函数 可 获取 滚轮 的 方 


向 。 


示例 : 在 消息 控制 台中 输出 鼠标 滚轮 的 状态 ， 如 图 15-14 所 示 。 


void setup () 
{ 
{ 
size(100, 100); 


} 
} 


void draw() {} // 维持 鼠标 检 
void mouseWheel (MouseEvent event) 


{ 
{ 


float e t .getAmount (); 
// 鼠 
println(e); 


noCursor () 函数 能 隐藏 鼠标 ， 而 cursor () 函数 能 将 鼠标 显示 为 不 同 的 图 标 。 运 行 noCursor () 后 鼠标 会 一 直 隐藏 ， 直 到 cursor () 被 运行 。 


给 cursor () 添加 一 个 参数 可 以 改变 鼠标 的 图 标 ， 这 个 参数 可 以 是 ARROW (箭头 ) 、CROSS ( 叉 号 ) 、HAND ( 手 形 ) 、TEXT (文字 ) 、WAIT (等 待 号 ) 。 


示例 : 画 一 个 矩形 当 作 按 钮 ， 鼠 标 经 过 按钮 时 变 成 手 形 (模拟 按钮 ) 。 


15-13 
void setup () 
{ 


size(500,500);} 
void draw() 
{ 
if (mouseX>50&&mouseX<100&&mouseY>50&&mouseY<100) 
cursor (HAND) ; // 鼠标 变 成 手 形 
else cursor (ARROW) // 和 鼠标 变 回 普通 状态 
Zectt507 ‘50 507 S50) 
}// 由 于 截图 中 看 不 见 鼠 标 ， 所 以 不 提供 截 轩 


15.2 ”键盘 的 互动 


15.2.1 ”键盘 相关 的 系统 变量 


1.key 变 量 


key 是 系统 变量 ， 它 指 的 是 键盘 上 最 近 被 使 用 的 键 (无 论 是 按 下 或 者 松 开 ) 。key 得 到 的 是 按键 上 代表 的 字符 的 AsClI 码 ， 当 按 下 特殊 键 时 (如 UP、DOWN、LEFT、RIGHT 方 向 键 ， 以 及 Alt、Ctrl、 
Shift 键 ) ， 被 赋值 为 65535。 


2.keyPressed 变 量 


keyPressed 是 一 个 布尔 型 的 系统 变量 。 如 果 keyPressed 的 值 是 true， 表 示 有 键盘 按键 被 按 下 ; 如 果 值 是 false， 表 示 没有 键盘 按键 被 按 下 。 


示例 : 画 一 个 白色 和 矩形， 按键 时 变 黑 ， 如 图 15-15 和 图 15-16 所 示 。 


15-14 
void draw() { 
if (keyPressed == true) 
{ 
£i11(0); 
} else { 
fi11 (25573 


} 
rect (25; 25, 50, 50)7 


图 15-15 ”按键 之 前 


示例 : 画 一 个 白色 矩形 ， 按 b 键 时 变 黑 


void draw() 


{ 


if (keyPressed) 


{ 
if (key = 'b' 


11 key 一 'B') 


fil1(0) 7 


else 


fill(255)? 


} 
rect (25, 25, 


50, 50): 


图 15-16 ” 按 下 按键 之 后 
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15-18 所 示 。 


45~15 


图 15-17 未 按 下 b 键 时 


图 15-18 ” 按 下 b 键 后 


3.keyCode 变 量 


keyCode 是 系统 变量 ， 它 用 于 检测 键盘 上 的 特殊 键 。 检 查 这 些 键 是 否 为 特殊 键 时 ， 可 以 使 用 条 件 语句 if (key==CODED) 来 完成 。 


keyCode 得 到 的 是 键盘 编码 ， 包 含 了 特殊 键 编码 ， 注 意 应 与 key 区 分 开 。 当 按 下 小 写字 母 的 时 候 ， 记 录 的 是 大 写字 母 的 AsClI 码 。 


15-20 所 示 。 


15-19 和 


[ 
区 


示例 : 画面 中 一 个 矩形 ， 按 上 键 (UP) 变 白色 , 按 下 键 (DOWN) 变 黑色 ,如 


15-16 
color fillVal = 126; 
void draw() 


£il] (fillVal); 
rect (25, 25; 507 50)7 


void keyPressed () 


{ 

if (key == CODED) 
// 特殊 键 的 Kkey 值 为 CODE， 此 时 需要 keyCode 再 次 判断 
{ if (keyCode == UP) 


fillVal = 255; 


} 
else if (keyCode == DOWN) 
{ 
fillVal = 0; 
} 


else 


fillVal = 126; 


图 15-19 按 上 键 


图 15-20 按 下 键 


15.2.2 ”键盘 事件 函数 


1 .键盘 按 下 函数 


keyPressed () 是 键盘 按 下 函数 ， 每 次 键盘 有 按键 被 按 下 的 时 候 ，keyPressed () 函数 就 会 被 调用 。 被 按 下 的 键 值 存储 在 key 变 量 中 。 


由 每 台 计算 机 的 操作 系统 和 配置 方式 来 决定 的 。 


各 


岗 


由 于 操作 系统 会 重复 处 理 按键 ， 所 以 当 一 直 按 着 一 个 键 的 时 候 ， 可 能 会 多 次 调用 keyPressed () (keyReleased () 也 同样 如 此 ) 。 重 复 的 速率 


keyReleased () 是 键盘 释放 函数 。 每 次 键盘 按键 被 松 开 的 时 候 ，keyPressed () 函数 就 会 被 调用 。 被 松 开 的 键 值 存储 在 key 变 量 中 。 


示例 : 按键 时 以 按键 的 AsCll 码 作为 边 长 画 一 个 正方 形 ， 松 开 按键 时 正方 形 消失 ， 如 图 15-21 和 图 15-22 所 示 。 


了 ~ 了 7 
int value = 0; // 颜色 数值 
void setup () 


size (200,200); 


} 

void draw() 

{ 
rect (25, 25, key, key); 
if (value==0) 
background (255); 

} 

void keyPressed () 


Value=key7 


} 


void keyReleased () 
{ 
value=0; 


} 


图 15-21 按 下 A 时 


图 15-22” 按 下 T 时 


3 键盘 限定 按 下 函数 
如 UP、DOWN、LEFT、RIGHT、CAPS LOCK COMMAND、Ctrl、Shift 和 Alt 会 被 忽略 ， 其 他 按键 则 会 触发 该 函数 。 


keyTyped () 是 键盘 限定 按 下 函数 ， 指 的 是 某 个 键 被 按 下 时 ， 特 殊 角 


示例 : 在 消息 控制 台 输出 前 面 3 种 函数 下 keyCode 的 值 ， 如 图 15-23 所 示 。 


15=18 

void draw() { } // 维持 键盘 检测 
void keyPressed () 

Println("pressed " + int(key) + " " + keyCode); 
} 
void keyTyped() 
{ 

Println("typed " + int(key) + " " + keyCode); 


} 
void keyReleased () 
{ 
Println("released " + int(key) + " " + keyCode); 


Dressed 97 65 
typed 97 0 
pressed 115 83 
typed 115 0 


released 97 65 
Dressed 100 68 
typed 100 0 

released lls 83 
released 100 68 


图 15-23 ”输出 结果 


运行 上 述 的 程序 ， 当 按 下 特殊 键 时 ， 如 Shift，keyTyped () 函数 不 被 调用 ， 但 按 下 Shift+a 键 时 ， 会 调用 keyTyped () 函数 ， 此 时 响应 的 是 大 写字 母 A。 而 keyPressed () 和 keyReleased () 函数 按 
任意 键 均 被 调用 。 调 用 keyTyped () 函数 时 ， 只 记录 key 值 ， 不 记录 keyCode 值 ， 因 此 keyCode 值 为 0。 


15.3 ”综合 实例 : 鼠标 控制 的 珠 链 


鼠标 控制 珠 链 的 头 部 。 珠 链 上 的 每 个 珠子 的 位 置 保存 在 两 个 数组 中 ， 一 个 数组 保存 x 坐 标 ， 另 一 个 数组 保存 y 坐 标 。 珠 链 头 部 的 坐标 根据 鼠标 位 置 每 帧 更 新 ， 如 图 15-24 所 示 。 


图 15-24 ”鼠标 控制 的 珠 链 


15~19 


float x, y; 

float node length = 30; 

float node size = node length-1; 
int n nodes = 70; 

float[] nodes x; 

float[] nogdes y; 

float delay = 20; 

Color col head = color(255, 0, 0); 
color col body = color(0); 

void setup () 


size(600, 600); 

smooth () 7 

nostroke () 7 

x = width/2; 

y = height/2; 

int rl = 10; 

int r2 = 100; 

int dr = r2-r1; 

float D= 0; 

nodes x = new float[n nodes]; 

nodes y = new float[n nodes]7 

for (int i=0; i<n nodes; i++) { 
float FE = Bortfrl * LD de * Ds 
float d= (r - rl) / dr; 


nodes x[i] = x - sin(d) * r; 
nodes y[i] =y+ cos(d) * r; 
D += node length; 
} 
§ 
void draw() 
{ 
background (204); 
// 设置 珠 链 头 部 的 位 置 
setTarget (mouseX, mouseY); 
// 画 珠 链 头 部 
fill (col head) 
ellipse (nodes x[0], nodes y[0], node size, node size); 
// 画 珠 链 体 
£ill (col body); 
for (int i=l; i < n nogdes; i++) { 
ellipse (nodes x[i], nodes y[il], node size, node size); 


二 
void setTarget (float tx, float ty) 
{ 


// 头 部 运动 插值 
X += (tx - x) / delay; 
yt (ty - y) / delay; 
nodes x[0] = x; 
nodes y[0] = y; 
// 约 末 其 他 节点 的 运动 
for (int i=1l; i < n nodes; i++) 
{ 
float dx = nodes x[i - 1] - nodes x[il]; 
float dy = nodes yl[li - 1] - nodes yl[il; 
float len = sqrt(sq(dx) + sq(dy))7 
nodes x[i] = nodes x[i - 1] - (dx/len * node length); 
nodes y[i] = nodes y[i - 1] - (dy/len * node length); 
} 
} 
void keyPressed() { 
} 


第 16 章 ”Processing 与 Arduino 互 动 


16.1 _ Arduino 简介 


Arduino 是 一 款 源 自 意大利 的 开放 源 代码 硬件 项 目 平台 ， 该 平台 是 一 块 USB 接 口 Simple I/O 接 


类 似 Java、( 语 言 的 IDE 集 成 开发 环境 。Arduino 是 基于 AVR 指 令 集 的 单片机 ， 但 它 简 


化 了 单片机 工作 的 流程 ， 对 AVR 库 进行 了 二 次 编译 封装 ， 将 复杂 的 单片机 底层 代码 封装 成 简单 、 实 
片 机 系统 的 开发 难度 ， 特 别 适 合 老师 、 学 生 和 一 些 业余 爱好 者 使 用 。 


以 Arduino UNO 板 ( 见 图 16-1) 为 例 ， 它 拥有 以 下 的 资源 : 


. 数字 引 脚 : 0~13。 

“ 串 行 通信 : 0 作为 RX， 接 收 数据 ; 1 作为 TX， 发 送 数据 。 

“ 外 部 中 断 : 2，3。 

PWM 输出 : ~3，~5，~6，~9，~10，~11。 

“SPI 通信 : 10 作 为 SS，11 作 为 MOSI，12 作 为 MISO ，13 作 为 SCK。 
“ 板 上 LED: 13。 

: 模拟 引 脚 : A0~A5 (在 引 脚 号 前 加 A， 与 数字 引 脚 区 分 ) 。 
"TWI 通 信 : A4 作 为 SDA，A5 作 为 SCL。 


Processing 是 纯 软 件 平台 ， 


无 法 直接 控制 硬件 ， 而 借助 于 Arduino， 可 以 读 取 各 种 传感器 的 数值 ， 也 可 控制 各 种 机 电 装 


无 需 关心 单片机 编程 烦琐 的 细节 ， 基 本 不 用 管 寄存 器 、 地 址 指针 等 ， 从 而 大 大 降低 了 单 


妇 用 于 控制 智能 家 居 、 无 人 飞机 、 机 器 人 等 各 种 硬件 实体 。 


， 可 扩 


13 个 数字 引 脚 ， 含 6 个 PWM 引 肢 
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图 16-1 Arduino UNO 板 


Arduino 的 开发 环境 与 Processing 非 常 相似 ， 如 图 16-2 所 示 。 除 了 File (文件 ) 、Edit (编辑 ) 、Sketch (概述 ) 、Tools (工具 ) 、Help (帮助 ) 这 5 个 菜单 外 ， 在 菜单 栏 下 方 还 提供 了 5 个 常用 的 快捷 
菜单 按钮 ， 它 们 依次 为 Verify ( 校 验 ) 、Upload (上 传 ) 、New (新 建 ) 、Open (打开 ) 、Save (保存 ) 。 


GO sketch oct08a | Arduino 1.0.5 
File Edit Sketch Tools Help 


Sketch_oct083 


上 rduino Uno on CDM1 


图 16-2 Arduino 开 发 界面 


这 5 个 快捷 菜单 按钮 的 具体 功能 如 下 。 


Verify， 用 于 对 完成 程序 的 检查 和 编译 。 


Upload， 用 于 将 编译 完成 后 的 程序 上 传 到 Arduino 控 制 板 。 


Open， 用 于 打开 一 个 已 存在 的 Arduino 程 序 文件 ， 其 文件 后 缀 名 为 .pde，1.0 版 本 以 后 的 文件 后 缀 名 为 .ino。 


国 . 
国 : 
国 : New， 用 于 新 建 一 个 Arduino 程 序 文件 。 
国 . 
国 . 


Save， 用 于 保存 当前 的 程序 文件 。 


关于 Arduino 的 语法 ， 读 者 可 以 访问 www.arduino.cc 的 参考 (reference) ， 或 阅读 笔者 的 另 一 本 书 《Arduino 开 发 实战 指南 机 器 人 卷 》， 本 书 不 对 Arduino 进 行 详 述 。 


第 16 章 “Processing 与 Arduino 互 动 


16.1 Arduino 简介 


Arduino 是 一 款 源 自 意大利 的 开放 源 代 码 硬件 项 目 平台 ， 该 平台 是 一 块 USB 接 口 Simple I/O 接 口 板 ， 并 且 具 有 使 用 类 似 Java、C 语 言 的 IDE 集 成 开发 环境 。Arduino 是 基于 AVR 指 令 集 的 单片机 ， 但 它 简 
化 了 单片机 工作 的 流程 ， 对 AVR 库 进行 了 二 次 编译 封装 ， 将 复杂 的 单片机 底层 代码 封装 成 简单 、 实 用 的 函数 ， 使 用 者 无 需 关心 单片机 编程 烦琐 的 细节 ， 基 本 不 用 管 寄存 器 、 地 址 指针 等 ， 从 而 大 大 降低 了 单 
片 机 系统 的 开发 难度 ， 特 别 适 合 老师 、 学 生 和 一 些 业余 爱好 者 使 用 。 


以 Arduino UNO 板 ( 见 图 16-1) 为 例 ， 它 拥有 以 下 的 资源 : 


' 数字 引 脚 : 0~13。 

“ 串 行 通信 : 0 作为 RX， 接 收 数据 ; 1 作为 TX， 发 送 数据 。 

“ 外 部 中 断 : 2，3。 

. PWM 输出 : ~3，~5，~6，~9，~10，~11。 

: SPI 通 信 : 10 作 为 SS，11 作 为 MOSI，12 作 为 MISO ，13 作 为 SCK。 
“ 板 上 LED: 13。 

“ 模拟 引 脚 : A0~A5 (在 引 脚 号 前 加 A， 与 数字 引 脚 区 分 ) 。 


* TWI 通 信 : A4 作 为 SDA，A5 作 为 SCL。 


Processing 是 纯 软件 平台 ， 无 法 直接 控制 硬件 ， 而 借助 于 Arduino， 可 以 读 取 各 种 传感器 的 数值 ， 也 可 控制 各 种 机 电 装置 ， 可 扩展 用 于 控制 智能 家 居 、 无 人 飞机 、 机 器 人 等 各 种 硬件 实体 。 


13 个 数字 引 脚 ， 含 6 个 PWM 引 脚 
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电源 口 6 个 模拟 引 脚 


图 16-1 Arduino UNO 板 


Arduino 的 开发 环境 与 Processing 非 常 相似 ， 如 图 16-2 所 示 。 除 了 File (文件 ) 、Edit (编辑 ) 、Sketch (概述 ) 、Tools (工具 ) 、Help (帮助 ) 这 5 个 菜单 外 ， 在 菜单 栏 下 方 还 提供 了 5 个 常用 的 快捷 
菜单 按钮 ， 它 们 依次 为 Verify ( 校 验 ) 、Upload (上 传 ) 、New (新 建 ) 、Open (打开 ) 、Save (保存 ) 。 


Ge sketch_oct08a | Arduino 1.0.5 辐 [s] xl 


File Edit Sketch Tools Help 


sketch_oct08a 


上 rduino Uno on COh1 


图 16-2 ” Arduino 开发 界面 


这 5 个 快捷 菜单 按钮 的 具体 功能 如 下 。 


[ee 


: Verify， 用 于 对 完成 程序 的 检查 和 编译 。 


: Upload， 用 于 将 编译 完成 后 的 程序 上 传 到 Arduino 控 制 板 。 


New， 用 于 新 建 一 个 Arduino 程 序 文 件 。 


: Open， 用 于 打开 一 个 已 存在 的 Arduino 程 序 文件 ， 其 文件 后 缀 名 为 .pde，1.0 版 本 以 后 的 文件 后 缀 名 为 .ino。 


: Save， 用 于 保存 当前 的 程序 文件 。 


关于 Arduino 的 语法 ， 读 者 可 以 访问 www.arduino.cc 的 参考 (reference) ， 或 阅读 笔者 的 另 一 本 书 《Arduino 开 发 实战 指南 机 器 人 卷 》， 本 书 不 对 Arduino 进 行 详 述 。 


16.2 Arduino 串 口 编程 


Arduino 的 串口 通信 是 通过 在 头 文件 HardwareSerial.h 中 定义 一 个 HardwareSerial 类 的 对 象 serial， 然 后 直接 使 用 类 的 成 员 函 数 来 实现 的 。 捉 口 通信 函数 的 功能 如 表 16-1 所 示 。 


表 16-1 Arduino 串 口 通信 函数 


函数 名 于 
用 于 设置 串口 的 波 特 率 ， 波 特 率 是 指 每 秒 传输 的 比特 数 ， 除 以 8 可 得 到 每 秒 传输 的 


Serial.begin Rb rs Ph 
0 字 节 数 。 一 般 的 波 特 率 有 9600、19 200、57 600、115 200 等 


Serial.end() 停止 串口 通信 
Serial.available() 用 来 判断 串口 是 否 收 到 数据 ， 该 函数 返回 值 为 int 型 ， 不 带 参数 
Serial.setTimeoutO 使 用 SerialreadBytesUntil() 、Serial.readBytes()、Serial.parseInt() 或 Serial.parseFloat() 
时 ， 设 置 读 取 数据 超时 时 间 ， 单 位 是 毫秒 ， 默 认 1000 毫秒 
Serial.readBytesUntil() 从 串口 读 入 字符 ， 存 人 一 个 数组 中 。 当 遇 到 校 验 字 符 时 或 读 取 超时 时 停止 读 取 数据 
从 串口 读 取 字符 ， 存 入 一 个 数组 中 。 当 读 取 够 指定 数目 的 字符 或 读 取 超时 时 停止 读 
Serial.readBytes() ee 
取 数 据 
parseInt() 从 串口 读 取 整 型 数据 ， 当 过 到 字符 型 数据 或 读 取 超时 时 停止 读 取 数据 ， 并 返回 0 
, 从 串口 读 入 数据 ， 返 回 第 一 个 浮 点 型 数据 。 当 过 到 第 一 个 字符 或 读 取 超时 时 停止 读 
Serial.parseFloat() ee 
入 数据 
readString() 从 串口 读 入 字符 串 
readStringUntil() 从 串口 读 入 字符 串 ， 当 过 到 校 验 字符 时 停止 读 取 
Serial.read() 从 串口 读 入 数据 ， 该 函数 返回 值 为 整 型 的 串口 数据 ， 不 带 参数 
peekO 从 串口 读 入 数据 ， 与 read0 不 同 的 是 ，peek0 读 取 完 后 不 会 清空 串口 缓冲 数据 
Serial.find() 从 串口 读 入 数据 ， 当 遇 到 目标 字符 串 时 停止 读 取 ， 并 返回 true 
( 续 ) 
函数 名 功 能 
. . 从 串口 读 入 数据 ， 当 遇 到 目标 字符 串 时 停止 读 取 ， 并 返回 true ; 当 遇 到 校 验 字 符 时 
Serial.findUntil() A 
或 者 读 取 超时 时 返回 false 
Serial.print() 从 串口 输出 数据 ， 数 据 可 以 是 变量 ， 也 可 以 是 字符 串 
Serial.println() 与 Serial.print 困 数 类 似 ， 都 是 从 串口 输出 数据 ， 只 是 多 了 回 车 换行 功能 
serialEvent() 定义 一 个 串口 读 入 事件 


示例 : 从 串口 输出 “The char | have received: ”字符 的 程序 清单 如 下 。 


16-1 

int c=0; 
void setup () 
{ 

Serial .begin (9600); // 波 特 率 为 9600 
void loop () 

if(Serial.available()) 

c=Serial.read(); 
Serial.print ("The char I have received:"); 
/ 


Serial .println (c, DEC); // 输出 并 换行 


} 
delay (200); 


打开 Arduino 界 面 的 串口 监视 器 ， 输 入 任意 字符 ， 单 片 机 接收 到 会 返回 该 字符 的 AsCll 码 ， 如 图 16-3 所 示 。 


The char I have recelyved:97 


自动 滚动 


图 16-3 串口 监视 器 显示 界面 


16.3 ”Processing 串 口 编程 


Processing 的 串口 通信 由 Serial 库 提供 ， 可 以 通过 调用 成 


函数 来 实现 。 串 口 通信 函数 的 功能 如 表 16-2 所 示 。 


和 J 
加 


表 16-2 ”Processing 串 口 通信 函数 


函数 名 功 能 

availableO) 检查 串口 是 否 接收 到 数据 

read0 从 串口 读 人 数据 ， 数 据 为 字 节 类 型 ， 范 围 为 0 ~ 255 

readCharO 从 串口 读 人 数据， 返回 字符 类 型 数据 

readBytes() 从 串口 读 和 数据， 返回 字 节 类 型 数据 

readBytesUntilO 从 串口 读 和 数据， 返回 字 节 类 型 数据 ， 当 遇 到 校 验 字 符 时 停止 读 取 数 据 
readString() 从 串口 读 入 数据 ， 返 回 字 符 串 类 型 数据 

readStringUntilO 从 串口 读 和 人 数据， 返回 字符 串 类 型 数据 ， 当 遇 到 校 验 字 符 时 停止 读 取 数据 
bufferO 设置 缓冲 区 大 小 

bufferUntil) 在 从 串口 读 取 数据 时 ， 遇 到 特定 字符 才 会 停止 读 取 数据 

lastO 以 字 节 类 型 返回 读 取 到 的 最 后 一 个 数据 

lastCharO 以 字符 类 型 返回 读 取 到 的 最 后 一 个 数据 

write 人 回 串 口 写 人 数据 

clear() 清空 缓冲 区 数据 

stopO 停止 串口 数据 传输 

listO 返回 能 使 用 的 串口 

serialEvent() 自 定义 一 个 串口 接收 事件 


示例 : Processing 从 串口 读 取 数据 ， 如 图 16-4 所 示 。 


import processing.serial.*; // 导入 serial 库 
Serial port; // 实例 化 一 个 Serial 对 象 
String message; 
void setup(){ 
Port= new Serial (this, "COM10", 9600); // 初始 化 Port 


void draw(){ 
message=port. readstring () 7 // 读 取 数 据 
print (message); 


hello,processing 
hello,processing 
hello,processing 


hello,processing 
hello,processing 
hello,processing 
hello,processing 


图 16-4 ”Processing 读 取 串 口 数据 


超声 波 是 指 频 率 高 于 20kHz 的 声波 。 超 声波 测 距 的 原理 是 通过 测量 声波 在 发 射 后 遇 到 障碍 物 发 射 回 来 的 时 间 差 ， 计 算出 发 射 点 到 障碍 物 的 实际 距离 。 


测 距 公式 如 下 : 


L=V* (T2-Ti) /2 


王 


: 测量 长 度 。 
“V: 超声 波 在 空气 中 的 传播 速度 。 
. Ti: 测量 距离 的 起 始 时 间 。 


“To; 收 到 回 波 的 时 间 。 速 度 乘 以 时 间 差 等 于 来 回 的 距离 ， 所 以 要 除 以 2 得 到 实际 距离 。 


超声 波 测 距 传感器 种 类 很 多 ， 有 的 模块 带 有 串口 和 12C 输 出 ， 能 直接 输出 距离 值 ， 一 些 模块 还 具有 温度 补偿 功能 ( 当 要 求 测 距 精度 达到 1mm 时 ， 就 要 考虑 环境 温度 因素 ) 。 


本 书 选用 的 是 性 价 比比 较 好 的 HC-SR04 模 块 ， 如 图 16-5 所 示 。 


图 16-5 HC-SR04 超 声波 模块 


该 超声 波 模块 的 性 能 参数 如 下 : 

“ 精度 : 3mm。 

: 非 接触 试 检测 距离 : 2cm~450cm。 
引 脚 功能 如 表 16-3 所 示 。 


表 16-3 超声波 HC-SR04 模 块 引 肢 


序 号 模块 功能 引 脚 说 明 


2 Gnd 接地 
Trig 触发 控制 信号 输入 


Echo 回 啊 信 号 输出 


本 | 


Arduino 读 取 超 声波 测 距 的 数值 ， 发 送 给 Processing。 超 声波 Echo (回响 端 ) 接 ArduinoD4 脚 ， 超 声波 Trig (控制 端 ) 接 ArduinoD5 脚 。 


Arduino 端 程序 如 下 : 


16-3 
int inputPin =4; // Echo 接 D4 脚 
int outputPin=5; // Trig 接 D5 脚 
void setup () 
Serial .begin (9600); // 设置 波 特 率 
pinMode (inputPin, INPUT); // 定义 为 输入 
PinMode (outputPin, OUTPUT) ; // 定义 为 输出 


} 

void loop() { 
digitalWrite (outputPin, LOW); 
delayMicroseconds (2); 
digitalWrite (outputPin, HIGH); 


// 发 出 持续 时 间 为 10hs 到 Trig 脚 驱动 超声 波 检测 


delayMicroseconds (10) 7 


int distance =pulseIn (inputPin,HIGH) 


distance=distance/58; 
Serial .write (distance); 
delay (100);} 


// 接收 脉冲 时 间 
// 将 脉冲 时 间 转 化 为 距离 值 
// 发 送 距离 值 到 Processing 


Processing 端 程序 如 下 : 


Processing 接 收 Arduino 发 送 的 数 


居 ， 读 取 并 根据 接收 值 改 变 彩 圈 大 小 颜色 。 


import processing.serial.*; 
Serial myPort; 


int data;int val;float a;int d; 


void setup () 
{ 


16-4 


myPort = new Serial (this, "COM3", 9600); 


size(600,600); 
stroke (128); 


} 

void draw() 

{background (0); 
if (myPort .available() >0) 
{ 


data=myPort .read (); 
println (data); 
} 
if (data<5) 
{ 
data=5; 


} 
if (data>25) { 
data=25; 
} 
a=map (data, 5, 20, 5,140); 
d=int (a); 


// 画布 尺寸 
// 国力 线条 为 灰色 


// 背景 为 白色 


// 正 交 变 换 为 圆 的 半径 


for (float xl=50;x1<=550;xl1+=100) 


{ 


for (float yl=50;y1<=600;y1l+=100) 


. 


fill(118, 193, 206, 160)? 
ellipse (xl1, yl,d,d); 


¢ 
} 


for (float xl=0;xl1<=600;xl1+=100) 


for (float yl=0;y1<=600;y1l+=100) 


£il1] (242,204,47,160); 
ellipse (x1, yl,d,d); 


16.5“” 摇 杆 控制 Processing 绘 制 的 圆 


摇 杆 的 种 类 很 多 ， 大 部 分 


在 游戏 机 手柄 上 ， 如 图 


本 书 选 


了 其 中 的 一 个 控制 单元 一 -PS2 摇 杆 ( 见 | 


16-6 所 示 。 它 可 以 控制 游戏 人 物 角 色 运 动 。 随 着 电子 制作 、 机 器 人 制作 的 兴起 ， 越 来 越 多 的 手柄 被 用 


， 上 下 左右 找 动摇 杆 即 可 控制 


四 | 


16-7) 来 控制 在 Processing 上 绘制 的 


于 控制 智能 车 或 者 机 器 人 。 


上 下 左右 移动 。 


图 16-6 ”游戏 手柄 


图 16-7 PS2 摇 杆 


司 16-6 所 示 的 摇 杆 模块 的 引 脚 从 上 到 下 分 别 是 GND、+5V、VRx、VRy 和 SW。 其 中 VRx 和 VRy 分 别 是 X 轴 和 Y 轴 的 模拟 电压 输出 ， 将 其 连接 在 Arduino 板 的 A0 和 A1 上 ，GND 和 +5V 与 Arduino 板 上 的 对 


应 引 脚 相 连 。 


前 面 的 例子 只 发 送 一 个 数值 ，Processing 可 以 轻易 地 完成 处 理 ， 而 X 轴 和 Y 轴 数据 有 2 个 ， 为 了 避免 识别 错误 ， 需 发 送 判 断 符 作 为 数据 开始 读 取 的 标志 ， 再 用 间隔 符号 把 两 个 数值 隔 开 。 


在 下 面 的 示例 中 ，Arduino 读 取 摇 杆 X 轴 和 Y 轴 的 模拟 数值 ， 先 发 送 判断 符 HEADER 作 为 读 取 数 据 的 标志 ， 再 分 别 发 送 x、y 数 值 ， 两 者 之 间 用 “，” 隔 开 ， 方 便 Processing 读 取 。 最 后 发 送 println () 输 
出 换行 符 ， 作 为 数据 的 结尾 。 


Arduino 端 程序 如 下 : 


16=5 
#define PotXPin AO 
#define PotYPin Al 
char HEADER = 'M'; 
void setup(){ 
Serial .begin (9600); 


} 

#define potxPin AO 

#define potYPin Al 

char HEADER = 'M'; 

void setup(){ 
Serial.begin (9600); 


} 

void loop () 

{ 
int x = analogRead (PotXPin) 7 // 读 生 
int y = analogRead (potYPin); // 读 取 Y 


Serial .print (HEADER); 
Serial .print (","); 
Serial .print (x, DEC); 

Serial .print (","); 

Serial .print (y, DEC); 

Serial .print (","); 

Serial .println(); // 发 
delay (40); 


Processing 端 程序 如 下 : 


判断 data[ 中 的 第 一 位 与 起 始 位 HEADER 相 等 ， 则 进行 data 输 出 ， 得 到 x、y 的 值 。 


通过 对 间隔 符 “，” 的 读 取 ， 将 Arduino 传 输 的 x、y 用 数组 data[] 存 储 。 


通过 x、y 改 变 圆 的 坐标 : ellipse (X/2，W2，50，50) 。 


16-6 
import processing.serial.*; 
Serial myPort; 
public static final char HEADER = 'M'; 
public static final short LF = 10; 
public static final short PortIndex = 2; 
void setup() { 
size(512, 512); 
println (Serial.1ist())7 // 返回 可 以 调用 的 端口 
myPort = new Serial (this, "COM3", 9600); 
myPort .bufferUntil('\n'); 
} // 设置 一 个 特定 的 字 节 缓冲 之 前 调用 serialEvent 
void draw() { 
} 
void serialEvent (Serial myPort) { 
String message = myPort.readSstringUntil (LF); 
// 返回 一 个 字符 串 缓冲 区 ， 包 括 一 个 特殊 字符 
if (message != null) { 
print (message); 
String []data = message.split(","); // 返回 带 有 特殊 字符 的 字符 囊 
println (data[1]); 
println (data[2]); 
void draw() { 
} 
void serialEvent (Serial myPort) { 
String message = myPort.readStringUntil (LF); 
// 返回 一 个 字符 串 缓冲 区 ， 包 括 一 个 特殊 字符 
if (message != null) { 
print (message); 
String []data = message.split ("™,"); // 返回 带 有 特殊 字符 的 字符 囊 
println (data[1]); 
println (data[2]); 
if (data[0] .charAt (0) == HEADER) 


if (data.length > 2) 


{ 

int x = Integer.parseInt (data[1]); 
// 把 整 型 对 象 转换 成 基本 数据 类 型 int 

int y = Integer.parseInt (data[2])7 

Brint(™ x¥= "+ x)} 

print{(", Y= + ¥)? 

background (255); 

£1i11(0; 0, 255)? 

ellipse (x/2, y/2, 50, 50); 


第 四 篇 “高 级 应 用 篇 
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17.1 ”Kinect 简 介 


Kinect 是 由 微软 公司 开发 的 体感 设备 ( 见 图 17-1) ， 应 用 于 Xbox 360 主 机 的 周边 设备 。 它 让 玩家 不 需要 手持 或 踩踏 控制 器 ， 而 使 用 语音 指令 或 手势 来 操作 游戏 机 的 系统 界面 。 它 能 捕捉 玩家 全 身上 下 的 
动作 ， 用 身体 来 进行 游戏 ， 带 给 玩家 “ 免 控 制 器 的 游戏 与 娱乐 体验 ”。 


图 17-1 Kinect 实 物 图 
器 和 红外 线 CMOS 摄 影 机 所 构成 的 3D 结 构 光 深 度 感应 器 ， 用 来 采集 深度 数据 (场景 中 物体 


像 。 左 右 两 边 的 镜头 则 分 别 为 红外 线 发 身 


Kinect 有 3 个 镜头 ， 中 间 的 镜头 是 RGB 彩色 摄影 机 ， 用 来 采集 彩色 图 
到 摄像 头 的 距离 ) 。 
彩色 摄像 头 最 大 支持 1280x960 分 辨 率 成 像 ， 红 外 摄像 头 最 大 支持 640x480 成 像 。Kinect 还 搭配 了 追 焦 技 术 ， 底 座 马 达 会 随 着 对 焦 物 体 的 移动 而 转动 。 
源 定位 。 


Kinect 内 建 阵列 式 麦 克 风 ， 由 4 个 麦克 风 同 时 收音 ， 比 对 后 消除 杂音 ， 并 通过 其 采集 声音 进行 语音 识别 和 
的 并 行 计算 逻辑 ， 可 控制 近 红外 光源 ， 进 行 图 像 编 码 ， 并 和 


Kinect 的 核心 处 理 部 件 是 以 色 列 PrimeSense 公 司 的 PS1080 系 统 级 芯片 SoC。 该 芯片 拥有 超 强 | 
图 像 传输 给 PS1080 处 理 ， 最 终生 成 深度 图 像 。 


E 动 投射 近 红外 光谱 。 该 芯片 通过 一 个 标准 的 


像 传感器 接收 投影 的 红外 光谱 ， 将 编码 后 的 反射 斑点 
他 功能 和 Kinect 基 本 一 致 ， 但 体积 比 Kinect 更 加 小 巧 。 


CMOS 图 
没有 电机 ， 不 能 自动 转动 ， 


17-2 所 示 。Xtion Pro 的 底 夺 


PS1080 处 理 器 的 还 有 华硕 公司 的 Xtion Pro， 如 图 


同样 采 


17-2 ”华硕 的 Xtion 
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它 能 捕 提 玩家 全 身上 下 的 


17.1 Kinect 简 介 
Xbox 360 主 机 的 周边 设备 。 它 让 玩家 不 需要 手持 或 踩踏 控制 器 ， 而 使 用 语音 指令 或 手势 来 操作 游戏 机 的 系统 界面 。 


Kinect 是 由 微软 公司 开发 的 体感 设备 ( 见 图 17-1) ， 应 用 了 


动作 ， 用 身体 来 进行 游戏 ， 带 给 玩家 “ 免 控 制 器 的 游戏 与 娱乐 体验 ”。 


图 17-1 Kinect 实 物 图 


来 采集 彩色 图 像 。 左 右 两 边 的 镜头 则 分 别 为 红外 线 发 射 器 和 红外 线 CMOS 摄 影 机 所 构成 的 3D 结 构 光 深 度 感应 器 ， 用 来 采集 深度 数据 (场景 中 物体 


Kinect 有 3 个 镜头 ， 中 间 的 镜头 是 RGB 彩色 摄影 机 ， 上 
到 摄像 头 的 距离 ) 。 
彩色 摄像 头 最 大 支持 1280x960 分 辨 率 成 像 ， 红 外 摄像 头 最 大 支持 640x480 成 像 。Kinect 还 搭配 了 追 焦 技 术 ， 底 座 马 达 会 随 着 对 焦 物 体 的 移动 而 转动 。 


Kinect 内 建 阵列 式 麦 克 风 ， 由 4 个 麦克 风 同 时 收音 ， 比 对 后 消除 杂音 ， 并 通过 其 采集 声音 进行 语音 识别 和 声 源 定位 。 


Kinect 的 核心 处 理 部 件 是 以 色 列 PrimeSense 公 司 的 PS1080 系 统 级 芯片 SOC。 该 芯片 拥有 超 强 的 并 行 计算 逻辑 ， 可 控制 近 红 外 光源 ， 进 行 图 像 编码 ， 并 主动 投射 近 红 外 光谱 。 该 芯片 通过 一 个 标准 的 


CMOS 图 像 传感器 接收 投影 的 红外 光谱 ， 将 编码 后 的 反射 斑点 图 像 传输 给 PS1080 处 理 ， 最 终生 成 深度 图 像 。 


FE 没 有 电机 ， 不 能 自动 转动 ， 其 他 功能 和 Kinect 基 本 一 致 ， 但 体积 比 Kinect 更 加 小 巧 。 


同样 采用 PS1080 处 理 器 的 还 有 华硕 公司 的 Xtion Pro， 如 图 17-2 所 示 。Xtion Pro 的 底 且 


17-2 ”华硕 的 Xtion 


17.2 ”安装 SDK 


安装 光盘 安装 SDK， 先 连接 设备 ， 读 取 光盘 的 内 容 ， 直 接 单 击 “ 安 装 ” 即 可 。 需 要 注意 ， 所 


若 使 用 Kinect 请 在 微软 官网 下 载 相关 的 驱动 ， 目 前 已 经 支持 Windows 开 发 。 若 使 用 华硕 的 Xtion， 请 先 使 
有 安装 的 东西 都 需要 放 在 同一 目录 下 。 


在 Windows8 或 Windows8.1 系 统 下 安装 时 会 提示 出 错 ， 不 用 理会 ， 继 续 安 装 ， 然 后 再 安装 一 次 时 会 提示 修复 ， 单 击 “ 修 复 ” 即 可 。 


的 是 Kinect 还 是 Xtion， 均 需要 SimpleOpenNI 库 。 请 把 SimpleOpenNI 库 存 入 安装 Processing 的 子 目录 .…...modes/java/libraries 中 。 


由 于 Processing 支 持 的 是 OpenN1， 不 管用 户 使 


图 的 例子 ，NiUserTracker64 是 获取 骨骼 的 例 


若 读者 使 用 的 是 Xtion ， 请 找到 SDK 安 装 的 位 置 ， 然 后 打开 相应 的 文件 目录 \OpenNIN\Samples\Bin64\Release， 其 中 ，NiViewer64 是 封装 好 的 获取 深度 
子 ，NiHandTracker64 是 获取 手势 并 追踪 手势 的 例子 。 


17.3 OpenNI 


OpenNI (开发 式 的 自然 交互 ) 是 一 个 多 语言 、 跨 平台 的 框架 ， 专 注 于 提高 和 改善 自然 交互 设备 、 应 用 软件 的 互 操 作 能 力 。 


OpenNI 是 开源 的 框架 ， 该 框架 提供 了 一 组 基于 传感器 设备 的 AP1， 以 及 一 组 由 中 间 件 组 件 实现 的 API。 该 框架 通过 打破 传感器 和 中 间 件 之 间 的 依赖 ， 使 用 OpenNI 编 写 应 用 程序 不 需要 考虑 多 个 中 间 件 
冲突 的 问题 。 


Kinect 或 Xtion 上 的 深度 图 、RGB 图 、 红 外 线 图 都 可 以 通过 OpenNI 获 取 。 如 图 17-3 所 示 为 OpenNI 摘 要 分 层 图 。 


应 用 (游戏 、 电 视 、 浏 览 器 等 ) 应 用 


中 间 组 件 
(例如 手势 
识别 ) 


OpenNI 
接口 


硬件 
(传感器 ) 


图 17-3 OpenNI 摘 要 分 层 图 


17.4 获取 RGB、 深 度 和 红外 图 像 


本 节 通 过 OpenNI 获 取 Kinect 的 RGB 图 像 、 深 度 图 像 和 红外 图 像 。 示 例 17-1 展 示 了 同时 显示 RGB 图 像 和 深度 图 像 的 情况 。 


17=1 
import SimpleOpenNI .*; // 导入 Simple-OpenNI 库 
SimpleOpenNI Kinect; // 声明 包含 对 象 Kinect 变 量 
void setup () 
{ 
Kinect=new SimpleOpenNI (this); // 初始 化 Kinect 对 象 
Kinect.enableDepth () ; // 启用 深度 图 
Kinect .enableRGB () // 启用 RGB 图 像 
Kinect .setMirror (true); // 启用 镜像 


size (Kinect .depthWidth ()+Kinect.rgbWidth(),Kinect.depthHeight () ) 7 


} // 设置 RGB 图 像 和 深度 图 并 排放 在 一 起 的 总 尺寸 
void draw() 

Kinect .update () 7 // 更 新 Kinect 对 象 

image (Kinect .depthImage () ,0,0); // 显示 深度 图 


image (Kinect .rgbImage (), Kinect .depthWwidgth () ,0); 


因为 Kinect 上 有 一 个 红外 线 CMOS 传 感 器 ， 所 以 我 们 也 可 以 得 到 红外 线 图 像 。 下 面 的 例子 同时 显示 深度 图 像 和 红外 图 像 。 


17-2 

import SimpleOpenNI.*; // 导入 Simple-OpenNI 库 
SimpleOpenNI Kinect; // 声明 包含 对 象 Kinect 变 量 
void setup () 
{ 

Kinect=new SimpleOpenNI (this); // 初始 化 Kinect 对 象 

Kinect .enableDepth (); // 启用 深度 图 

Kinect .enableIR(); // 启用 红外 图 像 

Kinect.setMirror (true); // 启用 镜像 


size (Kinect .depthWidth ()+Kinect.irWidth()，Kinect.depthHeight ()) 7 


} // 设置 红外 图 像 和 深度 图 并 排放 在 一 起 的 总 尺寸 
void draw () 
{ 

Kinect .update () 7 // 更 新 Kinect 对 象 

image (Kinect .depthImage () ,0,0); // 显示 深度 图 


image (Kinect.irImage (),Kinect.depthWidth(),0); // 显示 红外 图 像 


注意 不 能 在 当前 窗口 中 同时 采用 RGB 图 像 和 红外 图 像 。 示 例 程 序 获得 的 深度 图 中 看 到 的 灰 度 值 表 示 的 是 物体 到 摄像 机 的 距离 。 


17.5 ”手势 追踪 


为 了 实现 自然 的 交互 ，Primesense 公 司 把 骨骼 和 手势 跟踪 功能 商业 化 公开 发 行 了 ， 但 是 代码 保密 。 为 此 ，Primesense 公 司 专门 设计 了 NITE。 


NITE 是 不 开源 的 中 间 件 ， 让 Kinect 或 Xtion 可 以 实现 手 部 /骨骼 跟踪 与 手势 识别 功能 。 


接着 来 感受 一 下 手势 追踪 和 骨骼 跟踪 的 功能 。 在 Processing 中 ， 读 者 可 以 通过 简单 调用 函数 来 实现 。 


首先 ， 需 要 在 Processing 主 程序 中 加 入 一 组 函数 或 方法 ， 当 事件 发 生 时 调用 SimpleOpenNI 库 。 


洽 测 到 手 部 并 初始 化 一 个 手 部 对 象 的 时 候 调 用 onCreateHands () 方法 。 


17-3 
void onCreateHands (int handID,Pvector pos,float time) 
{ 


} 
/* 得 到 一 个 包含 手 部 ID 的 整 元， 一 个 定义 了 手 部 识别 位 置 的 Pvector， 还 有 一 个 带 有 时 间 蕉 的 浮 点 值 。 在 此 可 以 加 入 更 多 的 代码 ， 一 旦 识别 到 手 部 代码 就 会 运行 */ 


每 次 Kinect 更 新 数据 的 时 候 就 调用 onUpdateHands () 函数 。 


17-4 
void onUpdateHands (int handId,Pvector pos,float time) 
{ 


} 
/* 得 到 一 个 新 的 手 部 位 置 向 量 和 时 间 。 可 以 在 此 加 入 手 部 更 新 时 起 运行 的 代码 */ 


NITE 还 可 以 调用 两 个 与 手势 识别 有 关 的 方法 。 


NITE 识 别 到 手势 的 时 候 调 用 的 是 onRecognizeGesture () 函数 。 


47=5 
void onRecognizeGesture (String strGesture,PVector idPosition,PVector endPosition) 
{ 


} 
/*strGesture 包 含 的 是 确认 手势 的 名 称 (挥手 、 击 手 或 举 手 ) 。 得 到 两 个 3DPVector， 表 示 手 势 开 始 和 结束 坐标 */ 


在 姿态 进行 过 程 中 触发 onProgressGesture 函 数 。 


void onProgressGesture (String strGesture,PVector position,float progress) 


} 
/* 给 出 的 是 随 着 姿态 类 型 和 手 部 当前 位 置 所 完成 的 姿态 百分比 ， 这 通常 是 很 短 时 间 ， 但 是 可 以 用 来 进行 一 些 应 用 */ 


当 手 部 删除 ( 手 在 屏幕 上 无 法 识别 或 消失 不 见 ) 的 时 候 ,调用 onDestroyHands () 函数 。 


17-6 
void onDestroyHands (int handId, float time) 
{ 
} 


下 面 通过 实例 来 使 用 前 面 所 述 的 函数 实现 手势 追踪 。 在 图 17-4 中 ， 捕 捉 到 手 的 时 候 ， 程 序 在 手 部 位 置 上 绘制 了 一 个 绿色 的 小 点 ， 绿 色 点 会 随手 部 实时 移动 。 


sketch 150730a 
| 


17-7 
import SimpleOpenNI.*; 
SimpleOpenNI Kinect; 
PVector handVec=new PVector(); 
color handPointCol=color (255, 0, 0); 
void setup () 


Kinect= new SimpleOpenNI (this); 

Kinect .setMirror (true) 

Kinect .enableDepth () 

Kinect .enableGesture () 

Kinect .enableHands () 7 

Kinect .addGesture ("Hello"); 

size (Kinect .depthWidth(), Kinect.depthHeight ()); 


} 
void onRecognizeGesture (String strGesture, PVector idPosition, PVector endPosition) 


// 识 执 


Kinect .removeGesture (StrGesture) 
Kinect .startTrackingHands (endPosition) 
} 
void onCreateHands (int handId, PVector pos, float time) 


// 检测 加 


handVec=pos; 
handPointCol=color (0, 255, 0); 


void onUpdateHands (int handId, PVector pos, float time) // 更 新 


handVec=pos; 

二 

void draw() 

{ 
Kinect .update (); // 更 新 
Kinect .convertRealWorldToProjective (handVec, handVec); 
image (Kinect .depthImage (), 0, 0); 
strokeWeight (10); 
stroke (handPointCol); 
point (handVec.x, handVec.y); // 画 点 


手势 追踪 有 非常 广泛 的 运用 ， 在 上 面 程序 中 加 几 行 代码 ， 就 可 以 实现 用 手势 控制 LED 灯 ， 甚 至 控制 机 器 人 、 智 能 车 等 。 


17.6 ”骨骼 跟踪 


可 使 用 OpenNl 来 进行 骨骼 跟踪 ， 但 其 唯一 的 缺点 是 用 户 需要 站 立 一 个 特定 的 初始 姿态 〈 举 起 双 头 的 投降 姿势 ) ， 让 中 间 件 来 检测 用 户 的 肢体 ， 并 启动 跟踪 。 随 着 版 本 的 升级 ， 将 来 这 个 缺点 有 望 从 
NITE 中 消失 。 


接着 来 看 看 进行 骨骼 跟踪 需要 用 到 的 回调 函数 。 读 者 可 以 在 这 些 函 数 中 加 入 自己 想 要 的 代码 。 


当 识别 到 一 个 新 用 户 的 时 候 ， 首 先 调用 的 是 onNewUser () 函数 。 此 时 还 没有 识别 到 骨骼 ， 只 是 被 检测 到 了 ， 如 果 读 者 想 跟踪 用 户 的 四 肢 ， 就 要 启动 姿态 检测 程序 。 


17-8 
void onNewUser (int UserId) 


println ("onNewUser-userId: "+userId); 
Kinect.startPoseDetection ("Hello",userId); 


当 识别 到 用 户 的 时 候 ，SimpleOpenNI 会 开始 寻找 初始 姿态 。 一 旦 检测 到 这 个 姿态 ， 就 调用 onstartPose () 方法 ; 此 时 需要 停止 姿态 检测 程序 ， 开 始 进 行 骨骼 矫正 。 


业 7= 生 
void onStartPose (String Pose int UserId) 
{ 
println ("onStartPose-userId"+userId+",pose:"+pose) 
Kinect .stopPoseDetection (userId); 
Kinect .requestCalibrationSkeleton (userId,true) : 


如 果 用 户 在 骨骼 矫正 完成 前 取消 了 初始 姿态 ，SimpleOpenNI 就 会 调用 onEndPose () 方法 。 


el 
void onEndPose (String pose,int userId) 


{ 
} 


void onStartCalibration (int userId) 
/* 表 示 校 准 过 程 开始 ， 整 个 过 程 会 持续 一 段 时 间 
{ 


println ("onEndPose-userId:"+userId+",pose:"+pose); 


println ("onstartCalibration-userId:"+userId); 
} 


当 SimpleOpenNI 丢 失当 前 用 户 的 时 候 会 调用 onLostUser () 。 这 个 情况 通常 发 生 在 用 户 离开 屏幕 一 段 时 间 的 时 候 。 
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void onLostUser (int userId){ 
println ("onLostUser-userId:"+userId); 
} 


如 果 校 准 过 程 由 于 某 种 原因 未 能 成 功 ，SimpleOpenNI 就 会 


回 


到 姿态 检测 模式 ， 这 样 就 可 以 重新 启动 整个 过 程 。 
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void onEndCalibration (int userId, boolean successfull) 
{ 
println ("onEnqdCalibration-userId:"+userId+", successfull:"+successfull); 
if (successfull) 
{ 
Println ("User calibrated!!!"); 
Kinect .startTrackingSkeleton (UserId); 
} else 
{ 
Println ("Failed to calibrate user!!!"); 
Println("Start pose detection"); 
Kinect .startPoseDetection ("Psi", userId); 


通过 下 面 的 实例 调用 前 面 所 述 的 函数 ， 来 实现 骨骼 识别 。 当 开始 识别 到 用 户 时 ， 用 户 被 锁定 ， 变 成 绿色 ， 然 后 绘制 骨骼 ， 如 


17-5 所 示 。 


图 17-5 骨骼 识别 图 像 
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import SimpleOpenNI.*; 
SimpleOpenNI Kinect; 
void setup () 
{ 
Kinect=new SimpleOpenNI (this); 
Kinect .setMirror (true); 
Kinect .enableDepth (); 
Kinect .enableUser (SimpleOpenNI .SKEL PROFILE ALL);// 
size (Kinect .depthWidth (),Kinect .depthHeight ()); 
} 
void draw() 


{ 


Kinect .update () 7 
image (Kinect .depthImage (), 0, 0); 
if (Kinect.isTrackingSkeleton (1)) 


drawSkeleton (1) ;// 在 屏 打印 出 1 个 印 2 个 就 改 为 2 
} 

} 

void drawSkeleton (int userId) 

// 将 关节 用 线 在 一 起 ， 调 用 SimpleOpenNI 的 drawLimb () 5 


{ 


PushStyle () 7 

stroke (255, 0, 0); 

strokeWeight (3); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL HEAD, SimpleOpenNI .SKEL NECK); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL NECK, SimpleOpenNI .SKEL LEFT SHOULDER); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL LEFT SHOULDER,SimpleOpenNI .SKEL LEFT ELBOW); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL LEFT ELBOW,SimpleOpenNI .SKEL LEFT HAND); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL NECK, SimpleOpenNI .SKEL RIGHT SHOULDER); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL RIGHT SHOULDER,SimpleOpenNI .SKEL RIGHT ELBOW); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL RIGHT ELBOW,SimpleOpenNI .SKEL RIGHT HAND); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL LEFT SHOULDER,SimpleOpenNI .SKEL TORSO); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL RIGHT SHOULDER,SimpleOpenNI .SKEL TORSO); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL TORSO,SimpleOpenNI .SKEL LEFT HIP); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL LEFT HIP,SimpleOpenNI .SKEL LEFT KNEF); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL LEFT KNEE, SimpleOpenNI .SKEL LEFT FOOT); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL TORSO,SimpleOpenNI .SKEL RIGHT HIP); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL RIGHT HIP,SimpleOpenNI .SKEL RIGHT KNEF); 
Kinect .drawLimb (userId, SimpleOpenNI .SKEL RIGHT KNEE,SimpleOpenNI.SKEL RIGHT FOOT); 

popstyle () 7 


void onNewUser (int userId) 
void onEndCalibration (int userId, boolean successfull) 
{ 
println ("onEndCalibration-userId:"tuserId+", successfull:"+successfull); 
if (successfull) 
{ 
Println ("User cailbrated!!!"); 
Kinect.startTrackingSkeleton (userId); 
} else 
{ 
println("Failed to cailbrate user!!!"); 
Println("Start pose setection"); 
Kinect .startPoseDetection ("Hello", userId); 


17.7 小 游戏 


本 书 利用 骨骼 识别 的 功能 来 做 一 个 简单 的 小 游戏 ， 读 者 可 以 扩展 自己 的 应 用 。 


1. 功 能 说 明 


开始 运行 程序 时 ， 画 框 项 部 将 随机 落下 黄色 小 球 ， 当 游戏 者 用 左手 或 者 右手 触 碰 到 小 球 时 ， 小 球 就 会 消失 。 读 者 可 以 增加 一 些 功能 或 者 特效 ， 例 如 做 成 类 似 “ 切 水 果 ” 的 动作 ， 手 碰 到 球 时 球 会 炸 开 。 


2. 具 体 实现 


建立 一 个 圆 的 类 (Circle) ， 这 个 圆 的 x 坐标 是 随机 的 。 给 这 个 圆 加 一 个 竖 直 向 下 的 速度 向 量 使 得 圆 会 慢 慢 下 落 。 当 手 部 位 置 与 圆 的 位 置 重 去 时 就 可 以 认为 手 磁 到 球 。 


由 于 圆 属于 二 维 平面 上 的 图 形 ， 而 骨骼 识别 是 三 维 平 面 上 的 ， 因 此 判断 手 部 和 圆 的 位 置 是 否 一 致 就 需要 把 骨骼 识别 到 的 位 置 转 化 为 平面 上 的 坐标 。 转 化 的 思路 大 致 是 这 样 的 : 先 调用 SimpleOpenNI 库 
里 的 getJointPositionSkeleton () 函数 ， 把 想 要 提取 的 坐标 放 到 Pvector 中 ， 接 下 来 将 3D 向 量 通过 投影 转换 成 2D。 要 完成 上 述 的 功能 ， 需 要 计算 一 个 身体 旋转 的 角度 angle， 该 角度 通过 左肩 和 右 肩 的 x、z 
坐标 的 比值 来 得 到 。 


得 到 该 角度 后 ， 调 用 库 里 的 convertRealWorldToProjective () 函数 ， 把 关节 转换 成 屏幕 上 的 坐标 。 要 注意 的 是 ， 手 部 的 坐标 不 可 能 每 次 都 与 圆 的 坐标 一 模 一 样 ， 所 以 ， 需 要 设 定 一 个 范围 ， 在 这 个 范 
围 内 可 以 认为 手 碰 到 了 圆 。 下 面 是 具体 的 实现 步骤 。 


1) 创建 一 个 Circle 类 。 
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Class Circle 
{ 
PVector position; // 位 置 向 量 
PVector velocity; // 速度 向 量 
float radius; // 半径 
Circle() 
{ 
float x=random (width); // x 坐 标 设置 为 0~ 画 布 宽度 之 间 的 随机 数 
float y=0; 
position=new PVector (x, y); 
Velocity=new PVector(0, 1); 
velocity. setMag (2); // 设置 速度 的 大 小 为 2， 方 向 不 变 
radius=30; 
} 
void update() 
{ 
position.add (velocity); // 位 置 向 量 如 上 速度 向 量 
} 
void display() 
{ 
DoStroke (); // 不 描 边 
£1i11 (#FFF000) 7 // 设置 颜色 
ellipse (position.x, position.y, radius, radius); 
// 画 圆 
println (position.x, position.y); // 在 控制 台 输 出 圆 的 坐标 


2) 在 骨骼 识别 的 代码 中 添加 新 代码 ， 在 setup () 函数 前 添加 如 下 代码 : 
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Circle c; 
PVector Rhand, Lhand,Reblow,Leblow,Rshoulder,Lshoulder; 
float angle; 


3) 在 setup () 函数 中 添加 如 下 代码 : 
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c=new Circle(); 
Rhand=new PVector (); 
Lhand=new PVector () 7 
Reblow=new PVector () 
Leblow=new PVector () 7 
Rshoulder=new PVector () 7 
Lshoulder=new PVector () 


4) 在 代码 的 第 15 行 的 f 函 数 中 添加 如 下 代码 : 
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updateAngles () 7 
println (Lhand); 
println (Rhand); 


5) 在 setup () 函数 中 添加 如 下 语句 


Lil8 
if (c.position.y>height/2|| (c.position.x+10>=Rhand.x&& c.position.x-5<Rhand.x)|| 
(c.position.x+10>=Lhand.x&&c.position.x-5<Lhand.x)) 
{// 当 球 超过 屏幕 一 半 时 ， 在 这 里 做 了 一 个 简单 的 坐标 修正 
c=new Circle(); 


} 


6) 要 将 3D 坐 标 映射 到 二 维 平面 上 ， 应 该 把 操作 写 在 updateAngles () 里 。 


719 
void updateAngles () 
{ 
User.getJointPositionSkeleton (1,SimpleOpenNI .SKEL LEFT HAND, Lhand); 
User .getJointPositionSkeleton (1, SimpleOpenNI .SKEL RIGHT HAND, Rhand); 
User.getJointPositionSkeleton (1,SimpleOpenNI .SKEL LEFT SHOULDER, Lshoulder); 
User.getJointPositionSkeleton (1, SimpleOpenNI.SKEI RIGHT SHOULDER, Rshoulder); 
User .getJointPositionSkeleton (1, SimpleOpenNI .SKEL LEFT ELBOW, Leblow); 
User.getJointPositionSkeleton (1, impleOpenNI .SKEL RIGHT ELBOW, Reblow); 
angle=atan2 (PVector. sub (Rshoulder, Lshoulder) .z， PVector. sub (Rshoulder, Lshoulder) .x); 
User.convertRealWorldToProjective (Lhand, Lhand); 
User.convertRealWorldToProjective (Rhand, Rhand); 


这 样 游戏 就 可 以 实现 了 。 如 果 很 难 识别 到 骨骼 ， 而 且 只 有 一 个 用 户 时 ， 可 以 把 下 面 的 语句 : 
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void onNewUser (int userId) 


{// 姿态 检测 


println ("onNewUser-userId:"+userId); 

if (Userl.isTrackingSkeleton(1)) return; 
Println("start Pose detection"); 
Userl .startPoseDetection ("Hello", userId); 


改 成 如 下 语句 ， 改 后 就 会 很 快速 地 捕捉 到 用 户 骨骼 。 但 只 限于 一 个 用 户 时 才 可 以 这 样 改动 。 
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Public void onNewUser (int UserId) 
{// 险 测 
println ("onNewUser-userId:"+userId); 
if (true) 

{ User.requestCalibrationSkeleton (userId, true); 

Println("start pose detection"); 

} 
else 
{ User.startPoseDetection ("Hello", userId); 


} 


最 后 实现 的 界面 如 


17-6 所 示 。 


[ 


图 17-6 ”游戏 运行 界面 


